如何实现批注功能。

[dgsfor]

我渲染了一篇markdown文档之后，想在网页上进行一些批注操作，请问这个有比较好的实现方案吗？

[dgsfor]

类似于word的批注功能

[imzbf]

这两个扩展可以实现类似的注释功能

1. https://github.com/markdown-it/markdown-it-footnote
2. https://github.com/markdown-it/markdown-it-abbr

编辑器扩展参考

[dgsfor]

好的，不过我现在遇到了一个前置问题。是想在预览页面，对某段文字进行选择，然后可以弹出一个确认框：提示是否批注的字样。但是这个弹窗位置始终有点问题，不确定是否可以配置到编辑器里面。
1.比如我选择了这段文字，会弹出一个popconfirm框，这个逻辑是：

2.但是这个弹窗的位置，不知道应该如何做到内容里面，实现这样的效果

[dgsfor]

我还有想过监听鼠标右键，然后弹出功能菜单的方法，但是弹窗的位置始终不是在所选文字上方

[imzbf]

看起来位置没错，都是中间的，目前没有办法放到内部，文章内容是html文本不是各大框架的组件。想要指向选中的内容估计挺麻烦的，选中的内容并不是一个完整的html节点，绝对定到位当时鼠标所在位置比较靠谱

[dgsfor]

看起来位置没错，都是中间的，目前没有办法放到内部，文章内容是html文本不是各大框架的组件。想要指向选中的内容估计挺麻烦的，选中的内容并不是一个完整的html节点，绝对定到位当时鼠标所在位置比较靠谱

嗯 是的。我后面选择了另外一个方案来实现了。直接搞了一个弹窗，这个更简单了。

选择批注之后，会弹窗，然后填入批注内容。

针对这个，我有个问题想请教，如何实现内容高亮(就是我对某个文字进行选择批注，这段文字就会高亮。) 查了一下，有一个这个比较类似：https://github.com/alienzhou/web-highlighter/blob/master/README.zh_CN.md

[dgsfor]

 function highlightABC(text, target) {
    const reg = new RegExp(`${target}`, 'gi');
    text = text.replace(reg, `<span style='background:red' color='black' size=4>${target}</span>`);
    return text;
  }

通过了一个笨办法来实现

[imzbf]

这个功能比较复杂，需要考虑挺多的，比如文章内容是否会更新，是否针对不同的用户表现不同？

像如果是个人文档，在这个编辑器里，基本上纯文本都有data-line的行号，你可以像你提供的那个站点一样，记录这个行号、选中内容开始、结束位置，以达到在渲染完成时重新去替换这部分内容，不过这种方式在内容有更新的时候可能就失效了。

那个站点好像是更新的源文本，就像把markdown的文本这是一段高亮文字更新为这是一段<mark>高亮</mark>文字。这倒是可以解决内容更新的时候，高亮内容不对的问题。

[dgsfor]

这个倒是一个好办法，昨天我测试实现了类似这样的批注功能，原理就是：替换这段文字加上类似标签，然后加上一个你之前提到的footnote。

这个批注我有两个想法：

• 第一是替换原文本内容，然后单独存储批注。
• 第二是不替换原文本内容，但是单独存储批注内容，并且记录原文本内容中批注的精确位置(这个也是我昨天纠结了半天，如何精确的定位这个文字内容，因为有重复的文本内容。)，最终在渲染的时候，先根据批注内容替换一下再展示。

[dgsfor]

这个在编辑器模式下确实有行号，貌似预览模式下没有吧，那我如何获取这个行号呢(问题还是在：如何精准定位我选择的批注位置)

[imzbf]

都是有的，可以通过这个号码找到对应的markdown文本所在的内容的

[dgsfor]

看到了，确实有的。那我先按照这个方案来走走，感谢大佬~