2

Rangyで蛍光ペンモジュールを使用しています。

いくつかのhtmlを持つdiv要素があります。htmlは実際にはajaxを使用してファイルからロードされます。このロードを行うボタンがあります。

テキストが読み込まれると、表示されているhtmlの一部を選択して、[ハイライト]ボタンを押すことができます。これにより、いくつかのRangyコードが呼び出され、必要に応じてテキストが強調表示されます...

//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);

//called on "Highlight" button click
highlighter.highlightSelection(highlightClassName, selection);

複製するために、最初のハイライトの大部分を選択してください。

次に、[HTMLの読み込み]ボタンをクリックして、HTMLを再読み込みします。予想通り、ハイライトは消えました。しかし今、私は別のテキストを選択します。これは、私が行った最初のハイライトと重なっています。「ハイライト」ボタンを押すと、どういうわけかハイライトは前のハイライトのものになります。なぜこうなった？

マージと関係があるはずですが、その理由がわかりません。rangy.getSelection()JSをデバッグすると、（からの）選択が期待どおりであることがわかります。

これが問題のJSFiddleレプリケーションです

4

2 に答える 2

2

highlightSelection各呼び出しの前に蛍光ペンを再作成することで、この問題を解決しました。これが機能する理由はわかりませんが、蛍光ペンは、ハイライトのマージなどに使用される以前のハイライトに関するデータを保存する必要があります。

私の質問のコードは、問題を解決するために次のように変更できます。

//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });

//called on "Highlight" button click
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);
highlighter.highlightSelection(highlightClassName, selection);
于 2013-02-08T19:08:48.007 に答える
2

これが発生する理由は、各ハイライトがDOM内の実際の範囲への参照を持つのではなく、文字オフセットのペアとして存在するためです。つまり、DOMの一部が置き換えられても、既存のハイライトは幸いにも気付かず、適用されていると想定し続けます。元の文字範囲に。

回避策は問題ありません。removeHighlights()別の方法は、蛍光ペンのメソッドを呼び出すことです。

highlighter.removeHighlights(highlighter.highlights);

デモ： http： //jsfiddle.net/8pMEt/1/

removeAllHighlights()同じことをするメソッドを追加します。

ドキュメントで明確にされていないことの1つは、強調表示が静的DOM、または少なくともテキストコンテンツが変更されていないDOMで機能するように設計されていることです。ハイライトが作成された後にDOMを変更すると、明らかに文字のオフセットが失われ、すべてが失敗する可能性があります。

于 2013-02-11T01:01:30.190 に答える