contentEditable 要素の選択を保存し、後で復元しようとしています。
イベントを観察し、paste以前と同じように HTML を保存し、HTML をクリアしてから、貼り付けたテキストを選択した位置に変更して手動で挿入したいと考えています。
この例を見てください: jsfiddle.net/gEhjZ
テキストの一部を選択して を押し、storeもう一度選択を解除して を押すとrestore、期待どおりに動作します。
しかし、最初に をヒットしstore、次に をヒットして HTML をまったく同じ HTML に置き換えてoverwrite htmlから を試みてrestoreも、何も起こりません。
使えば変わると思ってい.cloneRange()たのですが、そうでもありません。オブジェクト ( ) のディープ コピーでさえ、$.extend(true, {}, oldRange)うまくいきません。HTML を上書きするとすぐに、選択オブジェクトselも変更されます。選択コンテキストを変更すると範囲が消去されることは理にかなっていますが、まったく同じ HTML で復元しようとしています。
rangyを使用できることはわかっていますが、この小さな機能のためだけに巨大なライブラリを使用したくありません。私は何が欠けていますか？どんな助けでも大歓迎です！
注: Firefox/Chrome のみなので、クロスブラウザー ハックは必要ありません。
アップデート：
@Tim Down の回答は div を使用する場合に機能しますが、実際には iframe を使用しています。私がその例を作ったとき、私はそれは何の違いもないと思いました.
iframe の本体を復元しようとすると、次のエラーが表示されます: TypeError: Value does not implement interface Node.in the following line preSelectionRange.selectNodeContents(containerEl);. 私はグーグルからあまり得られませんでした。本文の内容をラップして、ラップの html を復元しようとしましたが、同じエラーが発生します。
この場合、jsfiddle は結果自体を表示するために iframe を使用しているため機能しません。そのため、ここに例を示します: snipt.org/AJad3
折り返しなしでも同じです: snipt.org/AJaf0
更新 2:editable.get(0)もちろん、
を使用する必要があると考えました。しかし今、iframe の選択の and は 0 です。snipt.org/AJah2 を参照してstartください。end