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



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

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

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

老--

搜索我能够找到这个

在此答案中使用field.selectionStart示例。

关于此答案:获取文本输入字段中的光标位置(以字符为单位(

它允许您查找所选内容在文本字段上的开始位置。

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

另外,在 React 上举个例子:如何从 react 中的文本区域获取所选文本?

在这个答案上,DraftJS 组件

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

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

简短的调查使Rangy荧光笔模块成为如何实现的可能选择之一

朗吉荧光笔模块演示

最新更新