rangy
rangy copied to clipboard
Using any other element than document while creating the highlighter
I am using the highlighter module to highlight a certain portion of the HTML page. A specific div is going to be using the module only which is actually an angular directive. I am persisting the highlight range in the backend and rendering it again when the page gets loaded again. This is because I want to persist the highlights.
The problem I am facing is that the page has few dynamic components which may or may not change on every page load. This creates problems in rendering the saved highlights.
To resolve this, I tried to use the static element while creating the highlighter, using the following code
var highlighter = rangy.createHighlighter(element);
This gave me the following error -
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)
(Please ignore the JS file names and code lines. They are merged by grunt.)
The error comes, because a particular containerNode is undefined. The containerNode which is basically missing from here is defined as element.body which is undefined for any DOM element except document element.
I tried using the following silly workaround.
element.body = document.body;
which was just doing the exact same stuff as sending document object in createHighlighter().
So I am assuming that the rangy.createHighlighter()
needs to have only document object as the parameter. My question is, how can I make it work for any element, not just the document object?
Reader the documentation of options here: https://github.com/timdown/rangy/wiki/Highlighter-Module#highlightselectionstring-classname-object-options
Probably you are looking for containerElementId