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

Question

我编写了一个简单的测试，以更改可编辑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？

Answer 1

错误消息很好地说明了问题，这是Rangy的保存/恢复模块使用具有特定ID的隐藏元素来标记选择范围的开始和结束，这意味着如果删除了这些元素，整个过程就会崩溃。

显而易见的解决方案是将所选内容存储为可见文本内的字符位置。 但是，这并不像看起来那样容易。 我正在积极研究一个模块，以正确地执行此操作，并希望在未来几个月内发布一些内容。 同时，这是一个天真的解决方案，足以应付许多情况：

在contenteditable div中替换innerHTML

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

问题描述

1 个解决方案

解决方案1
1 2012-03-15 11:40:40

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

问题描述

1 个解决方案

解决方案1 1 2012-03-15 11:40:40

解决方案1
1 2012-03-15 11:40:40