在修改innerHTML之后,在contentEditable上保存/恢复选择

时间:2011-11-23 01:55:38

标签: javascript selection innerhtml contenteditable

我知道在contentEditable中获取/设置光标位置几乎是不可能的。我不在乎了解这些信息。我需要能够保存当前选择,修改div的innerHTML,然后恢复选择。

我正在尝试contenteditable selected text save and restore提供的答案。它在输入div之后有效,但不能在 以编程方式 修改div的innerHTML之后。相反,当我调用restoreSelection时,插入符号只是开始。

有关如何在修改innerHTML而不是输入后如何在contentEditable上保存/恢复选择的任何建议将非常感激。

1 个答案:

答案 0 :(得分:2)

如果您在可编辑元素的现有innerHTML上进行某种字符串替换,则可以使用我的Rangy库及其save/restore selection模块。它使用具有特定ID的不可见元素来标记选择的开始和结束边界,因此如果您的innerHTML更改不包含这些元素,那么这将无效。

另一种选择是纯粹基于元素的文本节点内的字符索引来完成它。我在这里写了一个天真的实现:https://stackoverflow.com/q/5596688/96100