Tag: contenteditable

将光标处的内容插入到内容可编辑的div中: 我有一个可以理解的div，我需要在插入位置插入文本，这可以很容易地在IE中通过document.selection.createRange().text = "banana" 有没有类似的方式在Firefox / Chrome中实现？（我知道这里存在一个解决scheme，但是不能用在contenteditable div中，而且看起来很笨拙）谢谢！

当contenteditable被改变时触发一个事件: 当div值被改变时，我怎样才能触发一个事件？ <div class="changeable" contenteditable="true"> Click this div to edit it <div> 所以，当它的内容改变时，我想创build一个提醒和/或做其他事情： $('.changeable').text().change(function() { alert('Handler for .change() called.'); });

可满足的单线input: 对于我们在我工作的公司开发的应用程序，我们需要一个支持在基于JS的Web应用程序中插入表情符号的input。我们目前正在使用表情符号（即:-)）的input，并希望切换到插入实际的graphics图像。我们原来的计划是使用contenteditable <div> 。我们使用监听器进行粘贴事件以及不同的键/鼠标交互，以确保没有不必要的标记进入contenteditable（我们从文档的容器标签中去除文本，只留下我们自己插入的图像标签）。不过，现在的问题是，如果你input足够的内容（即高度增加），div就会resize。我们不希望发生这种情况，也不能让文本被隐藏（即简单的overflow: hidden ）。所以：有没有办法让contenteditable div行为像一个单行input？我最好喜欢，如果有一个相对简单的属性/ CSS属性，我已经错过了将做我想做的，但如果有必要的CSS + JS的build议也将不胜感激。

把重点放在div contenteditable元素上: 我有一个<div contenteditable=true> ，我通过所见即所得的方式定义了一些元素。例如<p> ， <h1>等。我想直接把重点放在这个元素之一上。例如在<p id="p_test"> 。但似乎focus()函数不能用于<div>元素， <p>元素… 有没有另一种方法来定义我的情况下的重点？

AngularJS和contentEditable两种方式绑定不能按预期工作: 为什么在下面的例子中，初始渲染值是{{ 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 […]

从contentEditable div中提取文本: 我有一个div设置为contentEditable和“ white-space:pre ”样式，所以它保持像linebreaks的东西。在Safari，FF和IE中，div看起来很像，工作原理也一样。一切都很好。我想要做的是从这个div中提取文本，但以这种方式不会丢失格式 – 特别是换行符。我们正在使用jQuery，其text()函数基本上是一个预定义的DFS，并将DOM分支中的所有内容粘合到一起。这会丢失格式。我看了一下html()函数，但是似乎所有三个浏览器在我的contentEditable div中都会在幕后生成实际的HTML。假设我把这个input到我的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将dynamic设置样式（字体，颜色，大小和alignment），这是使用CSS完成的，所以我不确定我是否可以使用pre标记（在我使用Google发现的某些页面上提到过）。有谁知道任何JavaScript代码和/或jQuery插件或从contentEditable div中提取文本的方式，以保留换行符？如果我不需要，我宁愿不重新创build一个parsing轮。更新：我从jQuery 1.4.2中删除了getText函数，并修改了它的空白大部分完好无损（我只chnaged一行，我添加一个换行符）; function extractTextWithWhitespace( elems ) { var […]

任何所见即所得的富文本编辑器不使用HTML（contenteditable或designMode），一个la（新的）Google文档？: 除了新的Google文档，我所见过的所有其他所见即所得的基于Web的富文本编辑器（ckeditor，tinymce，旧的Google Docs）都基于contenteditable或designMode。我个人讨厌使用这些编辑器。在整个体验变成挫折之前，并不需要太多格式化或复制/粘贴。返回突然间开始获得双间隔，意想不到的格式化通过从其他HTML源粘贴引入，撤消/重做被完全破坏，格式化变得极其难以控制，等等。我相信这是Google Docs推出更受限制的非HTML格式引擎的原因之一。那里有没有提供类似的开源库？提前致谢。

处理contentEditable DIV上的换行符: SAFARI / CHROME上的可用换行符有问题。当我在contentEditable <div>上按下“return”，而不是像Firefox那样创build一个<br> ，他们创build一个新的<div> ： <div>Something</div> <div>Something</div> 看起来像（在contentEditable DIV上）： Something Something 但是在消毒（去除<div> ）后，我得到这个： SomethingSomething 在Firefox中，可以contenteditable是： Something <br> Something 那消毒后看起来是一样的： Something Something 有什么解决scheme可以跨浏览器“规范化”吗？我发现这个代码是通过在contenteditable上按下Enter来创build一个<br>而不是<div> </ div> $(function(){ $("#editable") // make sure br is always the lastChild of contenteditable .live("keyup mouseup", function(){ if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") { this.appendChild(document.createChild("br")); } }) // use br […]

如何使HTML <div>元素可编辑跨浏览器？: 你知道如何使用JavaScript编辑<div>吗？我正在寻找跨浏览器的解决scheme。类似于富文本区域，但使用可编辑的<iframe> 。我需要一个类似的<div> 。我不想使用replace文本框。

contenteditable中的占位符 – 焦点事件问题: 我一直在试图问这个，没有任何解释/certificate错误发生的工作示例的运气。所以这里是另一个尝试：我试图在contenteditable DIV上复制一个占位符效果。核心概念很简单： <div contenteditable><em>Edit me</em></div> <script> $('div').focus(function() { $(this).empty(); }); </script> 这可能有些工作，但是如果占位符包含HTML，或者如果有其他处理正在进行，可编辑的DIV的文本插入符将被删除，并且用户必须重新点击可编辑的DIV才能开始input（即使它是仍然重点）：例如： http : //jsfiddle.net/hHLXr/6/ 我不能在处理程序中使用焦点触发器，因为它会创build一个事件循环。所以我需要一种方法在可编辑的DIV中重新设置插入光标，或者以其他方式重新对焦。