javascript - react 文本注释

Question

我正在开发一个 React 应用程序，用户可以在其中选择文本并添加简单的注释。此外，以前的注释将通过 JSON 从 API 加载。

注释 JSON 看起来像这样:

"annotations": [
  {
    "id": 1,
    "start": 12,
    "end": 67,
    "text": "Annotation Text"
  }
]

其中 start 和 end 是 HTML 中的字符位置，也是通过 JSON 和 dangerouslySetInnerHTML 加载的。因此，当添加新注释时，它们的字符位置需要在将注释保存回 API 时匹配。

理想情况下，注释也会在 UI 中突出显示。

关于如何做到这一点有什么建议吗？ AnnotatorJS 似乎维护得不是很好，所以我对在生产项目中使用它感到紧张。

谢谢!

Answer 1

使用 react-text-annotate 用于交互式突出显示部分文本的 React 组件。 https://github.com/mcamac/react-text-annotate/

这是 demo 的链接用于 react 中的文本注释