我 试图 实现 荧光 笔 到 我 的 博客 项目 使用 React ， 但 我 找 不到 任何 有用 的 库 来 实现 它 。 基本 上 ， 我 想 实现 媒体 的 荧光 笔 到 我 的 文章 页面 的 副本 。
文本 选择 完成 后 ， 如果 用户 激活 了 荧光 笔 工具 ， 应该 能够 突出 显示 文本 。 由于 它 需要 DOM 操作 ， 我 还 没有 看到 荧光 笔 的 完整 实现 。
我 想 做 的 是

• 用户 应 激活 荧光 笔 。
• 当 用户 在 文章 页面 的 指定 区域 选择 文本 时 ， 弹出 窗口 应该 出现 ， 用户 可以 选择 颜色 。
• 如果 鼠标 悬停 在 突出 显示 的 文本 上 ， 用户 应 看到 弹出 窗口 以 更改 颜色 并 删除 颜色 。

我 发现 了 一些 类似 的 工具 ;

• Link 最近 的 一 个 ， 但 它 没有 得到 哪个 区域 突出 显示 和 弹出 修改 是 不 容易 的 。
• Link 格式
• Link 无法 操作 所 选 文本 。

我 也 尝试 过 类似 的 JavaScript 示例 ， 但是 我 在 此 方法 上 遇到 了 错误 。 text
目前 ， 我 正在 尝试 写 我 自己 的 组件 ， 如果 我 能 完成 它 ， 我 将 分享 源 代码 。
这 是 我 写 的 组件 ， 在 文本 选择 完成 后 ， 我 如何 用 span 环绕 选定 的 文本 区域 ， 并 可以 跟踪 多 个 突出 显示 的 文本 ， 以 删除 而 不 破坏 React 。 我 还 没有 实现 弹出 窗口 。 我 在 文章 页面 上 调用 此 组件 。 参考 来自 文章 div 。

//articleRef is the id of article area where i want to Highlighter to work.

const Highlighter = ({articleRef}) => {

  const { isActive } = useSelector((state) => state.highlighter)
  const [selectedText, setSelection] = useState("")
  const [selectedNode, setNodeSelection] = useState("")
  const [selectedNodes, setNodesSelection] = useState()

  useEffect(() => {
   
    document.onselectionchange = function() {
      console.log(isActive)
      console.log(articleRef.current.id)
      // check if the selection done on the article area and check highlighter tool is active 
      if(articleRef.current.id === 'article-area' && isActive === true  ){
        console.log("Highlighter is active")
        if(document.getSelection() !== (undefined || null ) ){
          setNodeSelection(document.getSelection())
        }
        for(let i = 0; i < selectedNode.rangeCount; i++) {
          if( selectedNode.getRangeAt(i) !== (undefined || null )){
            console.log(selectedNode.getRangeAt(i))
            setSelection(selectedNode.getRangeAt(i).cloneContents())
          }
        };
        console.log(selectedNode)
        console.log(selectedText)
      }
    }
    
  }, [selectedText, selectedNode, isActive, articleRef])  

return null;

}

中 的 每 一 个