如何在反应中创建可选择的、可突出显示的文本答案

【问题标题】：How to create a selectable, highlightable text in react如何在反应中创建可选择的、可突出显示的文本
【发布时间】：2018-09-19 15:03:37
【问题描述】：

我需要一个 react 组件，它允许我显示一个文本，我可以轻松地为其捕获选定的文本区域，然后在其中创建嵌套跨度（例如，突出显示文本区域）。然后应该能够独立管理跨度（例如，使用它们自己的“onclick”操作）。

我知道这是一种非常具体的行为。我的目标不是问是否有一个组件可以满足我的所有要求，而是问是否有一些东西可以用作基础，以或多或少直接的方式（即，无需手动处理<p>'s 和document.getSelection())。有这样的东西吗？

【问题讨论】：

谢谢大家的回答，看来做我需要的确实不是一件简单的事情。最后，我发现我需要在突出显示的字符上呈现实际正方形的东西，所以我使用了绝对定位的 div（加上一些使用段落行高和字符位置的计算）。这对我的用例来说非常有效，但我知道这个解决方案并不适合所有人，至少可以说有点笨拙。一旦我可以发布我正在编写的代码，我会花一些时间写一个答案，向任何感兴趣的人解释我是如何做到的。

【解决方案1】：

编辑：我专门为此找到了this 组件，并且在其他答案中人们推荐了DraftJS 组件。答案如下

老--

搜索我能找到这个

在this answer. 中使用field.selectionStart 示例

它允许您在文本字段中找到选择的开始位置。

我知道它不是一个组件，但是如果你找不到它，希望它对你有所帮助

在这个答案上DraftJS 组件

【讨论】：

【解决方案2】：

不要以为这样的组件是写在 React 上的...

这看起来像 Native JS 区域，如果你会找到库，很可能你需要创建不受控制的 DOM（因此 react 不会更新它）并使用库来突出显示该 DOM 中的某些内容

简短的调查将Rangy Highlighter-Module 视为如何实施的可能选项之一

【讨论】：