rangy icon indicating copy to clipboard operation
rangy copied to clipboard

Using any other element than document while creating the highlighter

Open Abhi347 opened this issue 8 years ago • 1 comments

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?

Abhi347 avatar Feb 01 '17 15:02 Abhi347

Reader the documentation of options here: https://github.com/timdown/rangy/wiki/Highlighter-Module#highlightselectionstring-classname-object-options

Probably you are looking for containerElementId

Gumija avatar Apr 03 '17 07:04 Gumija