如何在react中创建可选择的,突出显示的文本

时间:2018-09-19 15:03:37

标签: javascript reactjs

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

我知道这是一种非常具体的行为。我的目标不是问是否有一个组件可以满足我的所有要求,而是要问是否有某种东西可以用作以某种或多或少的直接方式获得大多数这种行为的基础(也就是说,不必手动处理<p>document.getSelection())。这样的东西存在吗?

2 个答案:

答案 0 :(得分:1)

编辑:我能够为此专门找到this组件,在其他答案上,人们推荐了DraftJS组件。答案如下

OLD-

搜索我就能找到这个

  

this answer.中使用field.selectionStart示例

关于此答案:Get cursor position (in characters) within a text Input field

它使您可以找到文本字段中所选内容的起始位置。

我知道它不是组件,但是希望它在您找不到它的情况下有帮助

此外,它在React上的示例:How to get the selected text from text area in react?

在此答案上,DraftJS组件

答案 1 :(得分:1)

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

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

简短的调查将Rangy Highlighter-Module作为实现方法的可能选择之一

DEMO of Rangy Highlighter-Module