contentEditable div动态替换innerHTML

Question

有没有办法（Rangy库除外）动态更改contentEditable Div InnerHTML，就像在keyup上一样，没有光标位置/焦点丢失？我想使用纯JavaScript代码，尽可能简单。

例如：

<div id="divId" contentEditable="true" onkeyup="change(this)"></div>

然后javascript：

function change(element)
{
  element.innerHTML = element.innerHTML.replace(/.../, '...');
}

感谢。

Answer 1

如果您要替换HTML，则需要一些保存和恢复选择的方法。选项包括：

1. 在替换HTML之前在选择的开头和结尾插入带有ID的元素，然后通过ID检索它们并使用这些元素移动选择边界。这是最强大的方法，也是Rangy所做的。
2. 在HTML替换之前为选择的开始和结束存储某种基于字符的偏移量，然后重新创建选择。这在一般情况下会出现各种问题，但可能会很好，具体取决于您的需求。我posted functions on SO to do this before依赖于Rangy，但如果你不介意失去对IE的支持，你可以轻松地删除Rangy的东西。 9。
3. 按像素坐标存储和恢复选择边界。浏览器对此的支持并不好，如果您的HTML替换更改了布局，则不适用。

Answer 2

这不使用keyup事件但也许就足够了？请注意，适用于身体，您显然可以只针对某个元素。

document.body.contentEditable='true';
document.designMode='on';
void 0;