更改可编辑 div 元素的 html 结构时如何恢复选择/插入符号位置？答案

【问题标题】：How to restore the selection / caret position when the html structure of an editable div element is changed?更改可编辑 div 元素的 html 结构时如何恢复选择/插入符号位置？
【发布时间】：2012-03-15 11:20:32
【问题描述】：

我编写了一个简单的测试来更改可编辑 div 内容中的文本。 html结构变了，但文字是一样的。

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Hello</title> 
    <script type="text/javascript" src="rangy-core.js"></script> 
    <script type="text/javascript" src="rangy- 
selectionsaverestore.js"></script> 
</head> 
<body>

<div id="show" class="code" contenteditable="true"><span 
style="color:red">12345</span>12345</div> 

<script type="text/javascript">

window.setTimeout(function () { 
    // save selection / caret position
    var show = document.getElementById("show"); 
    show.innerHTML = "1234512345"; 
    // restore select / caret position
}, 5000) 

</script> 

</body> 
</html>

我试过这样rangy：

var s = rangy.saveSelection(); 
var show = document.getElementById("show"); 
show.innerHTML = "1234512345"; 
rangy.restoreSelection(s);

但是报错：

异常警告：模块 SaveRestore：标记元素已被删除。无法恢复选择。

rangy 是否支持我上面提到的功能？如果是，我应该如何使用它？如果没有，我应该怎么做才能实现它？

更新： 在我的场景中，我必须替换所有的 innerHTML，因为文本会被格式化为非常丰富的样式。但在我的情况下，没有样式的文本总是相同的。这是记录选择和插入符号位置并将其重新设置的任何可能方式吗？我应该使用哪种 API？

【问题讨论】：

标签： javascript html rangy

【解决方案1】：

错误信息非常描述问题，即 Rangy 的保存/恢复模块使用具有特定 ID 的隐藏元素来标记选择范围的开始和结束，这意味着如果删除这些元素，整个事情就会落下下来。

显而易见的解决方案是将所选内容存储为可见文本中的字符位置。然而，这并不像看起来那么容易。我正在积极开发一个模块来正确地做到这一点，并希望在接下来的几个月内发布一些东西。同时，这里有一个幼稚的解决方案，在许多情况下都足够好：

replace innerHTML in contenteditable div

【讨论】：

谢谢。在我的场景中，我必须替换所有的 innerHTML，因为文本将被格式化为非常丰富的样式。这是记录选择和插入符号位置并将其重新设置的任何可能方式吗？我应该使用哪种 API？
@JeffreyZhao：我链接到的问题中的saveSelection() 和restoreSelection() 函数应该会有所帮助。
它很容易被破坏。无论如何，谢谢，我可以按照您的点击来调查 API。