在rangy中创建荧光笔时使用除文档以外的任何其他元素

Question

我正在使用rangy的highlighter模块来突出显示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文件名和代码行。它们是由grunt合并的。)出现错误是因为某个特定的containerNode未定义。这里基本上缺少的containerNode被定义为element.body，它对于除document元素之外的任何DOM元素都是未定义的
我尝试使用以下愚蠢的变通方法。

element.body = document.body;

它只是在createHighlighter()中执行与发送文档对象完全相同的操作。

所以我假设rangy.createHighlighter()只需要有document对象作为参数。我的问题是，如何使它适用于任何元素，而不仅仅是文档对象？

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);
}