问题描述
我正在使用Rangy中的突出显示模块.
I am using the highlighter module in Rangy.
我有一个div元素，其中包含一些html. html实际上是使用ajax从文件中加载的，我有一个按钮可以执行此加载.
I have a div element, which has some html. The html is actually loaded from a file using ajax, I have a button which does this loading.
一旦加载了文本，我可以选择显示的html的一部分，然后按我的突出显示"按钮.这会调用一些Rangy代码，并根据需要突出显示文本...
Once the text is loaded, I can select a portion of the displayed html and press my "Highlight" button. This calls some Rangy code and highlights the text as desired...
//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);
出于复制的目的，请选择大部分作为第一高亮显示.
For the purpose of replicating, please select a large portion for first highlight.
接下来，我单击我的加载html"按钮以重新加载html.突出显示不出所料.但是，现在我选择了另一段文字，该文字恰好与我所做的第一个突出显示重叠.现在，当我按下突出显示"按钮时，由于某种原因，突出显示是上一个突出显示中的突出显示.为什么会这样?
Next, I click my load html button to reload the html. The highlight is gone, as expected. But now I select another bit of text, which happens to overlap the first highlight that I did. Now when I press the "Highlight" button, for some reason the highlight is the one from the previous highlight. Why is this happening?
我知道合并一定有关系，但是我不明白为什么.当我调试JS时，可以看到(来自rangy.getSelection()的)选择是我期望的.
I know there must be something to do with the merging, but I can't understand why. When I debug the JS I can see that the selection (from rangy.getSelection()) is what I expect it to be.
推荐答案
之所以会发生这种情况，是因为每个突出显示都以一对字符偏移量的形式存在，而不是引用DOM中的实际范围，这意味着当替换了DOM后，现有的高亮显示仍然很不高兴，并继续假定它们已应用于原始字符范围.
The reason this is happening is because each highlight exists as a pair of character offsets rather than having references to actual ranges in the DOM, meaning that when some part of the DOM is replaced, existing highlights remain blissfully unaware and continue to assume they are applied to the original character range.
您的解决方法很好.另一种方法是调用荧光笔的removeHighlights()方法:
Your workaround is fine. Another way would be to call the highlighter's removeHighlights() method:
highlighter.removeHighlights(highlighter.highlights);
演示: http://jsfiddle.net/8pMEt/1/
我将添加一个将执行相同操作的removeAllHighlights()方法.
I'm going to add a removeAllHighlights() method that will do the same thing.
文档中未明确说明的一件事是，突出显示旨在用于静态DOM，或至少具有文本内容不变的DOM.创建高光后更改DOM显然可能会使字符偏移消失，并且整个过程都会崩溃.
One thing that the documentation doesn't make clear is that highlighting is designed to work on static DOMs, or at least DOMs with text content that doesn't change. Changing the DOM after highlights have been created could obviously throw character offsets off and the whole thing falls down.
这篇关于兰吉:创建新的重点是记住旧的重点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！