将高光绑定到另一个元素

Bind rangy highlight to another element

本文关键字：另一个 元素 绑定 高光      更新时间：2023-09-26

我正在尝试实现基于突出显示的评论，类似于 Medium.com 上的评论，用户可以突出显示某些文本并将评论与该文本相关联。使用 Rangy，我可以使用元素属性 onclick 回调来获取突出显示 id，然后我可以使用它来切换关联的注释并使其显示为"活动"。我无法弄清楚的是如何做相反的事情 - 单击注释并向关联的突出显示元素添加一个类以使它们具有"活动"外观。

或者，有没有办法根据突出显示 id 一次应用一个突出显示，而不是使用反序列化并应用所有以前的突出显示？我想我可以解析序列化的注释并在字符串中搜索我要查找的 id，但我认为一定有一种我在文档中找不到的更干净的方法。

有什么想法吗？

我想出了一个解决方案。创建突出显示后（在我的例子中，它添加一个元素，其class="note"类似于 Rangy 荧光笔模块演示），我可以遍历所有注释并添加一个 data 属性来识别它是哪个突出显示的一部分：

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

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

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

相关文章：