我有一个div设置contentEditable并用" white-space:pre" 设置样式,所以它保持像linebreaks的东西.在Safari,FF和IE中,div几乎看起来和工作原理相同.一切都很好.我想要做的是从这个div中提取文本,但是这样的方式不会丢失格式 - 特别是换行符.
我们使用的是jQuery,它的text()功能基本上是预先订购的DFS,并将DOM的那个分支中的所有内容粘合成一个整体.这会丢失格式.
我看了一下这个html()函数,但似乎所有三个浏览器都使用在我的contentEditablediv中幕后生成的实际HTML做了不同的事情.假设我在我的div中输入:
1
2
3
这些是结果:
Safari 4:
1
<div>2</div>
<div>3</div>
Firefox 3.6:
1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">
IE 8:
<P>1</P><P>2</P><P>3</P>
啊.这里没有什么非常一致的.令人惊讶的是,MSIE看起来最健康!(大写P标签和所有)
div将动态设置样式(字体,颜色,大小和对齐),这是使用CSS完成的,所以我不确定我是否可以使用pre标记(我在使用Google找到的某些页面上提到过).
有没有人知道任何JavaScript代码和/或jQuery插件或从contentEditable div中提取文本以保留换行符的方式？如果我不需要,我宁愿不重新发明解析轮.
更新:我getText从jQuery 1.4.2中抄袭了这个函数并对其进行了修改以提取它,其中大部分空格完整(我只添加了一行,我添加了换行符);
function extractTextWithWhitespace( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text …使用contenteditable元素,如何用我自己的html替换所选内容？
在Firefox中使用contentEditable时,是否可以通过按Enter或shift + enter来阻止用户插入段落或换行符？
我一直在高低寻找答案,但失败了.
是否有跨浏览器解决方案来替换contenteditable div中的选定文本？我只是希望用户突出显示一些文本并将突出显示的文本替换为xxxxx.
更改div值时,如何触发事件？
<div class="changeable" contenteditable="true"> Click this div to edit it <div>
因此,当内容发生变化时,我想创建一个警报和/或做其他事情:
$('.changeable').text().change(function() {
alert('Handler for .change() called.');
});
为什么在以下示例中,初始渲染值{{ person.name }}不是David？你会如何解决这个问题？
HTML:
<body ng-controller="MyCtrl">
<div contenteditable="true" ng-model="person.name">{{ person.name }}</div>
<pre ng-bind="person.name"></pre>
</body>
JS:
app.controller('MyCtrl', function($scope) {
$scope.person = {name: 'David'};
});
app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
// view -> model
element.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
// model -> view
ctrl.$render = function() {
element.html(ctrl.$viewValue);
};
// load init value from DOM
ctrl.$setViewValue(element.html());
}
};
});
我在数据库中存储内容,例如:
Hello
This
is
Text
当我将它传递给textarea时,它会保留新的换行符.但是,如果我将该文本传递给内容可编辑的div,它将保持如下:
Hello This is Text
我该如何解决这个问题？
我是否会通过使用具有属性contentEditable="true"作为文本字段而不是文本区域的div来拍摄自己的脚？
我在我的Web应用程序中使用了contenteditable div元素,我正在尝试提出一个限制区域中允许的字符数量的解决方案,一旦达到限制,尝试输入字符就什么都不做.这是我到目前为止:
var content_id = 'editable_div';
//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(){ check_charcount(content_id, max); });
$('#'+content_id).keydown(function(){ check_charcount(content_id, max); });
function check_charcount(content_id, max)
{
if($('#'+content_id).text().length > max)
{
$('#'+content_id).text($('#'+content_id).text().substring(0, max));
}
}
此DOES将字符数限制为"max"指定的数字,但是一旦通过jquery .text()函数设置了区域的文本,光标就会将自身重置为该区域的开头.因此,如果用户继续键入,则新输入的字符将插入文本的开头,并且将删除文本的最后一个字符.所以,我只需要一些方法将光标保持在可信区域文本的末尾.
在此之前被标记为重复之前,我希望您意识到没有人真正为这个特定问题提供了一个好的答案.在焦点/点击时选择contenteditable div中的所有文本,接受的答案和Tim Down的答案都没有帮助,因为它们仅在元素已经聚焦时才起作用.在我的情况下,我希望在单击按钮后选择contenteditable div中的所有文本,即使div未事先聚焦.
我怎么能这样做？