2

我在 Rangy 中使用荧光笔模块。

我有一个div元素，它有一些 html。html 实际上是使用 ajax 从文件中加载的，我有一个按钮来执行此加载。

加载文本后，我可以选择显示的 html 的一部分并按我的“突出显示”按钮。这会调用一些 Rangy 代码并根据需要突出显示文本......

//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);

//called on "Highlight" button click
highlighter.highlightSelection(highlightClassName, selection);

出于复制的目的，请选择大部分作为第一个亮点。

接下来，我单击加载 html 按钮以重新加载 html。正如预期的那样，亮点消失了。但是现在我选择了另一个文本，它恰好与我所做的第一个突出显示重叠。现在，当我按下“突出显示”按钮时，由于某种原因，突出显示是上一个突出显示的那个。为什么会这样？

我知道必须与合并有关，但我不明白为什么。当我调试 JS 时，我可以看到选择 (from rangy.getSelection()) 是我所期望的。

这是问题的 JSFiddle 复制

4

2 回答 2

2

highlightSelection我通过在每次通话之前重新创建荧光笔解决了这个问题。我不知道为什么会这样，但是荧光笔必须存储一些关于以前的高光的数据，这些数据用于高光合并或其他东西。

我的问题中的代码可以更改如下来解决问题：

//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });

//called on "Highlight" button click
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);
highlighter.highlightSelection(highlightClassName, selection);
于 2013-02-08T19:08:48.007 回答
2

发生这种情况的原因是因为每个突出显示作为一对字符偏移量存在，而不是引用 DOM 中的实际范围，这意味着当 DOM 的某些部分被替换时，现有的突出显示仍然幸福地不知道并继续假设它们被应用到原来的字符范围。

你的解决方法很好。另一种方法是调用荧光笔的removeHighlights()方法：

highlighter.removeHighlights(highlighter.highlights);

演示：http: //jsfiddle.net/8pMEt/1/

我将添加一个removeAllHighlights()方法来做同样的事情。

文档没有明确说明的一件事是突出显示旨在用于静态 DOM，或者至少是文本内容不变的 DOM。在创建高光后更改 DOM 显然会导致字符偏移消失，整个事情就会崩溃。

于 2013-02-11T01:01:30.190 回答