时间戳

首页 > 解决方案 > 反应文本注释

javascript - 反应文本注释

问题描述

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

注释 JSON 看起来像这样：

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

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

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

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

谢谢！

标签： javascriptreactjshighlight

解决方案

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

这是反应中文本注释的演示链接

推荐阅读