如何修改可編輯div元素的html結構更改時的選擇/插入符號位置？

我寫了一個簡單的測試來更改可編輯div內容中的文本。 html結構已更改，但文本相同。如何修改可編輯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 warning: Module SaveRestore: Marker element has been removed. Cannot restore selection.

是否瘦長支持我上面提到的功能？如果是，我應該如何使用它？如果不是，我該怎麼做才能實現呢？

更新：在我的方案中，我必須替換所有的innerHTML，因爲文本將被格式化爲非常豐富的樣式。但在我的情況下，沒有風格的文本總是一樣的。是否有任何可能的方式來記錄選擇和插入位置並將其設置回去？我應該使用什麼樣的API？

來源

2012-03-15 Jeffrey Zhao

錯誤信息是對問題的很好描述，即Rangy的保存/恢復模塊使用帶有特定ID的隱藏元素來標記選擇範圍的開始和結束，這意味着如果刪除這些元素，整個事情摔倒。

顯而易見的解決方案是將選擇作爲字符位置存儲在可見文本中。然而，這並不像看起來那麼容易。我正在積極研究一個模塊來做到這一點，並希望在接下來的幾個月內發佈一些內容。在此期間，這裏有一個天真的解決方案是不夠好於許多情況：

replace innerHTML in contenteditable div

來源

2012-03-15 11:40:40

感謝。在我的場景中，我必須替換所有的innerHTML，因爲文本將被格式化爲非常豐富的樣式。是否有任何可能的方式來記錄選擇和插入位置並將其設置回去？我應該使用什麼樣的API？ – 2012-03-15 12:25:22

@JeffreyZhao：鏈接到的問題中的'saveSelection（）'和'restoreSelection（）'函數應該有所幫助。 – 2012-03-15 12:44:18

它可以很容易破碎。無論如何，我可以按照你的命中來調查API。 – 2012-03-15 15:49:09

如何修改可編輯div元素的html結構更改時的選擇/插入符號位置？

回答

相關問題