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);

但它报告错误：

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

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

UPDATE：在我的场景中，我必须替换所有innerHTML，因为文本将被格式化为非常丰富的样式。但在我的情况下，没有样式的文本总是相同的。是否有任何可能的方法来记录选择和插入位置并将其设置回来？我应该使用什么样的API？

Answer 1

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

显而易见的解决方案是将选择存储为可见文本中的字符位置。然而，这并不像看起来那么容易。我正在积极研究一个模块，以便在接下来的几个月内发布一些内容。与此同时，这是一个天真的解决方案，对于很多情况都足够好了：

replace innerHTML in contenteditable div

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

1 个答案: