立即替换contenteditable文本

我想添加一些HTML作为用户输入一个contenteditable东西。例如，立即替换contenteditable文本

$('body') 
    .delegate('div[contenteditable=true]', 'blur keyup paste', 
    function(){ 
     var html = this.innerHTML; 
     html.replace("a", "b"); 
     this.innerHTML = html; 
    });

对于其中一个，这似乎并不代替任何东西。二，我得到一个奇怪的问题，我不能再输入到contenteditable div中。我检查了在div上触发的事件，没有发生“模糊”事件。我似乎有div突出显示，但我必须再次点击该div键入任何内容。我在这里错过了什么？

来源

2010-11-13 Drew

如果您希望允许用户选择事物并使其成为粗体/斜体（或者在用户的插入点标记所在的位置插入HTML块），则需要使用document.execCommand。 Mozilla网站有documentation on this。

来源

2010-11-13 02:06:30 PleaseStand

对于第一部分，问题是JavaScript中字符串的replace()方法返回一个新字符串，并且不会影响原始字符串。你需要的是：

html = html.replace("a", "b");

对于第二个问题，这个问题可能是设置元素的innerHTML财产破坏并重新创建该元素中的整个DOM树，因为选择或插入符载的事实在那个不再存在的DOM树中，浏览器必须做些事情来恢复。我的猜测是你正在测试的浏览器只是清除选择。

来源

2010-11-13 01:57:56

是的，我已经想更换使用这种方式，谢谢指点出来。当调用innerHTML不确定什么时，DOM树会发生什么，但显然他们不打算按照我的方式使用它。 – Drew 2010-11-13 03:10:14

与类似问题的战斗：我需要突出contenteditable一些特殊字符。例如，突出显示& nbsp;有红色背景。所以我正在做类似

elem.innerHTML = elem.innerHTML.replace('&nbsp;', '<span class="highlight">&nbsp;</span>');

当然，浏览器会重新创建elem（重绘它），elem会松散焦点和插入位置。如果您将在FireFox中的键入/输入事件上打印elem.innerHTML，您会看到它将特殊的< br>粘贴为标记。我正在尝试使用相同的技巧：使用Range对象将标记粘贴到插入位置，然后我将替换为& nbsp; （在这一点上，我放松焦点），然后我得到标记选择它并删除。

见范围API文档https://developer.mozilla.org/en-US/docs/Web/API/range

来源

2013-08-27 08:21:15 Freebin

立即替换contenteditable文本

回答

相关问题