在修改 innerHTML 后保存/恢复对 contentEditable 的选择

Posted 2023-05-07

【中文标题】在修改 innerHTML 后保存/恢复对 contentEditable 的选择

【英文标题】：Save / restore selection on contentEditable AFTER modifying innerHTML

【发布时间】：2012-01-04 09:43:06

【问题描述】：

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

我一直在尝试contenteditable selected text save and restore 提供的答案。它在输入 div 后起作用，但在 以编程方式 修改 div 的 innerHTML 后不起作用。相反，当我调用 restoreSelection 时，插入符号只是转到开头。

任何关于在修改 innerHTML 而不是键入后如何能够在 contentEditable 上保存/恢复选择的建议将不胜感激。

【参考方案1】：

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

另一种选择是完全基于元素文本节点中的字符索引来执行此操作。我在这里写了一个简单的实现：https://***.com/q/5596688/96100

【讨论】：

Rangy 库已经出局，因为我替换了有问题的 div 的 innerHTML，所以它会遇到同样的问题。我会试试索引选项...谢谢。

我在使用第二个解决方案时在 uncompressed/rangy-core.js 的第 1051 行收到错误。 "node.childNodes 未定义" "if (offset (do...e.length : node.childNodes.length)) "

@user1022241 Rangy 存储标记元素的ids，而不是对元素本身的引用，因此如果您将innerHTML 替换为当前HTML 的字符串替换，它仍然可以工作.回覆。第二个建议的问题，你有一个我可以看的例子吗？

不错，Rangy 库就像一个魅力。 save / restore 模块的一个很好的功能是collapseToEnd 或collapseToStart，以防出于任何原因需要销毁不可见的跨度。我很乐意贡献代码，因为我即将编写确切的方法......

@user1022241：除非我理解错了，否则这并不难：var sel = rangy.getSelection(); sel.selectAllChildren(editableDiv); sel.collapseToStart();