ランジェリーでハイライトを作成中にドキュメント以外の要素を使用する

Question

モジュールrangyを使用して、HTMLページの特定の部分を強調表示しています。特定のdivは実際には角度指令であるモジュールのみを使用します。私は、バックエンドのハイライト範囲を保持しておき、ページが再びロードされると再びそれをレンダリングします。これはハイライトを維持したいからです。 私が直面している問題は、ページにはすべてのページの読み込み時に変更される可能性のある、または変更されない動的コンポーネントがほとんどないことです。これにより、保存されたハイライトをレンダリングする際に問題が発生します。 これを解決するために、私はこれは私に次のエラーを与えた

var highlighter = rangy.createHighlighter(element); 

次のコードを使用して、ハイライトを作成しながら、静的な要素を使用しようとした -

TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'. 
    at WrappedRange.api.createCoreModule.rangeProto.setStart (allPluginJsPartTwo.js:42934) 
    at WrappedRange.moveToBookmark (allPluginJsPartTwo.js:42427) 
    at Object.characterRangeToRange (allPluginJsPartTwo.js:45712) 
    at Highlight.getRange (allPluginJsPartTwo.js:45816) 
    at Highlight.apply (allPluginJsPartTwo.js:45837) 
    at Highlighter.deserialize (allPluginJsPartTwo.js:46203) 
    at allCommonJs.js:11098 
    at processQueue (allFrameworkJs.js:14804) 
    at allFrameworkJs.js:14820 
    at Scope.$eval (allFrameworkJs.js:16064) 

（JSファイル名を無視してくださいし、コードライン。彼らは混乱してマージされます。） 特定のcontainerNodeが定義されていないため、エラーが発生します。基本的にここから抜けているcontainerNodeは、document.bodyと定義されています。これは、document要素を除くすべてのDOM要素で未定義です。
私は次の愚かな回避策を試してみました。

これは、createHighlighter（）でドキュメントオブジェクトを送信するのとまったく同じことでした。

だから、私はrangy.createHighlighter()がドキュメントオブジェクトだけをパラメータとして持つ必要があると仮定しています。私の質問は、どのようにドキュメントオブジェクトだけでなく、どの要素に対しても動作させることができますか？

Answer 1

正確な要件はRangyでサポートされていませんが、複雑ではない別の関数を作成しなければならなかったのですが、なぜRangyでビルドされていないのかわかりませんでした。

しかし、とにかく、ここで私はそれをしました。 Rangyは、文字範囲を使用して、強調表示されたコンテンツを直列化および逆シリアル化します。だから私は関係する静的HTMLを含むdivまでそれらを保存する前に範囲を正規化しました。

たとえば、divのIDがpage-containerの場合、保存するまでハイライトの範囲からその部分を減算し、ハイライトを逆シリアル化したいときに、オフセットを再度計算しましたバック正規化された範囲にこれを追加しましたし、それは魔法:-D

のように働いた。ここだオフセット計算コード -

function getRangeOffset(){ 
    var converter = highlighter.converter; 
    var pageContainer = document.getElementById('page-container'); 
    var containerRange = rangy.createRange(document); 
    containerRange.setStart(pageContainer,0); 
    var containerCharRange = converter.rangeToCharacterRange(containerRange); 
    var rangeOffset = containerCharRange.start; 
    return parseInt(rangeOffset); 
}