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 に答える