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

时间:2012-03-15 11:20:32

标签: javascript html rangy

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

1 个答案:

答案 0 :(得分:1)

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

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

replace innerHTML in contenteditable div