1

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

我试过这样的范围：

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

但是它报错：

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

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

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

4

1 回答 1

1

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

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

替换 contenteditable div 中的 innerHTML

于 2012-03-15T11:40:40.060 回答