我写了一个简单的测试来改变可编辑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?
答案 0 :(得分:1)
错误信息很好地描述了问题,即Rangy的保存/恢复模块使用具有特定ID的隐藏元素来标记选择范围的开始和结束,这意味着如果删除这些元素,整个事情就会崩溃下来。
显而易见的解决方案是将选择存储为可见文本中的字符位置。然而,这并不像看起来那么容易。我正在积极研究一个模块,以便在接下来的几个月内发布一些内容。与此同时,这是一个天真的解决方案,对于很多情况都足够好了: