Question

我正在使用highlighter的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文件名和代码行。它们由grunt合并。）错误来了，因为未定义特定的containerNode。从这里基本上缺少的containerNode被定义为element.body，它对于除文档元素之外的任何DOM元素都是未定义的我尝试使用以下愚蠢的解决方法。

element.body = document.body;

这与在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);
}

在rangy

1 个答案: