将rangy亮点绑定到另一个元素

Question

我尝试实施类似于Medium.com上的基于精彩集锦的评论，用户可以在其中突出显示某些文字并将评论与该文字相关联。使用Rangy，我可以使用elementProperties onclick回调来获取突出显示ID，然后我可以使用它来切换相关注释并使其显示为“＃34;活跃”。我无法弄清楚的是如何做相反的事情 - 点击评论并在关联的高亮元素中添加一个类，为他们提供一个＆＃34;活跃的＆＃34;出现。

或者，有没有办法根据突出显示ID一次应用一个突出显示，而不是使用反序列化并应用所有以前的突出显示？我想我可以解析序列化的评论并搜索我在字符串中查找的ID，但我认为必须有一种更清洁的方式，我无法在文档中找到。

有什么想法吗？

Answer 1

我找到了解决方案。在创建一个高亮显示（在我的例子中添加了一个类似于Rangy荧光笔模块演示的class="note"的元素）之后，我可以遍历所有音符并添加一个数据属性来识别它所属的高亮：

$(".note").each ()->
  highlight = highlighter.getHighlightForElement($(this)[0])
  $(this).attr("data-highlight-id", highlight.id)

编辑：我找到了更好的解决方案

创建评论时，我现在保存与该评论一起的序列化高亮显示。在创建新的之前，我调用highlighter.removeAllHighlights（）以确保注释仅存储其自己的序列化高亮显示。然后，当用户点击评论时，我可以使用该信息重新创建突出显示。只需清除所有突出显示，然后对属于所点击的注释的突出显示进行反序列化。