如何在反应中从文本区域获取选定的文本？

关键词：

【中文标题】如何在反应中从文本区域获取选定的文本？【英文标题】：How to get the selected text from text area in react? 【发布时间】：2017-07-25 23:08:48 【问题描述】：

我试图做一个文本编辑器中react.Does任何人知道如何从textarea的选定的文本，以便样式可以在选定text.I适用知道我们能在JavaScript中使用window.getSelection但我想知道如果任何其他方法可用于该功能？

【问题讨论】：

【参考方案1】：

是的，有一种方法可以做到这一点，特别是在 React 中。实现这一目标的方法如下。

第 1 步：- 在您的 textarea ui 元素中使用 ref。喜欢

     `<textarea
           className='html-editor'  
           ref='myTextarea' 
          value = this.state.textareaVal
          onChange=(event)=>
                      this.setState(
                         textareaVal:event.target.value;
                      );
                   
       >
      </textarea>` 

第 2 步：- 现在您可以使用 react refs 访问 DOM 元素。

    let textVal = this.refs.myTextarea; 

第 3 步：- 使用 selectionStart 和 selectionEnd ：- 使用 selectionStart 和 selectionEnd 你可以知道你的开始和结束指针 选定的文本。可以按如下方式完成；

        let cursorStart = textVal.selectionStart;
        let cursorEnd = textVal.selectionEnd;

现在您有了所选文本的开始和结束索引。

第 4 步：- 使用 javascript 子字符串函数获取选定的文本。

    this.state.textareaVal.substring(cursorStart,cursorEnd) 

【讨论】：

【参考方案2】：

在 React 中制作文本编辑器的最佳方法是使用 DraftJS。

如果您使用 React，DraftJS 是解决问题的方法。它消除了您在尝试从头开始创建自己的文本编辑器时将面临的许多挑战。这包括管理编辑器的状态（类似于管理组件状态的方式）、管理文本选择、应用不同的属性等等。

您可以get started by checking out the docs，我建议您观看该页面上的介绍视频，它解决了 DraftJS 旨在解决的困难。

希望对你有帮助。

【讨论】：

DraftJS 几乎提供了太多的功能，压缩后的大小约为 60 kb，这是一个很大的库。为了比较，我已经创建了我自己的文本编辑器（具有丰富的样式和图像），压缩后只有 9 kb 没有 DraftJS。但是对于 React，最好使用像 DraftJS 或 Slate 这样的库，因为 React 不与 DOM 不同，而是与 VDOM 不同，因此您必须使两者保持同步，而使用 preact 则不需要（因为 preact 是宽容的） . DraftJS 现在几乎是废弃软件。 Facebook 的人试图自己维护它，但它非常缓慢，并且存在许多问题（首先是它具有线性值结构，而不是反映实际 DOM 的树）。 您有其他推荐@Almaron 吗？看起来贡献率不是很快，但它似乎仍然比我找到的任何替代方案都要好 我已经决定使用 SlateJS。对我来说最好的事情——它应该是一个树结构，而且它很容易设置和使用。一个缺点是 - 不支持 IE/Edge 并且在移动平台上有一些小故障。但我现在可以忍受。

如何从 jquery 的文本区域中获取选定的文本？ [复制]

】如何从jquery的文本区域中获取选定的文本？[复制]【英文标题】：Howtogetselectedtextfromatextareainjquery?[duplicate]【发布时间】：2013-04-0820:10:07【问题描述】：如果我从文本区域中选择文本，我需要知道选择了哪个文本，例如“hellowor... 查看详情

从文本区域获取文本时如何保留换行符？

】从文本区域获取文本时如何保留换行符？【英文标题】：HowdoIpreservelinebreakswhengettingtextfromatextarea?【发布时间】：2017-03-1723:36:36【问题描述】：当用户点击提交时，我在文本区域中获取值。然后我把这个值放在页面的其他地方... 查看详情

如何使用 PHP 从文本区域解析文本中的 \n 符号

】如何使用PHP从文本区域解析文本中的\\\\n符号【英文标题】：Howtoparse\\nsymbolsintextfromtextareawithPHP如何使用PHP从文本区域解析文本中的\\n符号【发布时间】：2014-08-1422:32:40【问题描述】：我有一个文本区域，我需要在提交表单时... 查看详情

如何将选定的文本包装在文本区域中？

】如何将选定的文本包装在文本区域中？【英文标题】：Howtowrapselectedtextinatextarea?【发布时间】：2010-12-1507:22:15【问题描述】：如何获取用户选择的文本（就在textarea内）并对其应用操作，例如包装选择[#bold]selectedtext[/bold]？【... 查看详情

在将数据输出回文本区域时，如何正确清理从文本区域接收的数据？

】在将数据输出回文本区域时，如何正确清理从文本区域接收的数据？【英文标题】：HowdoIproperlysanitizedatareceivedfromatextarea,whenoutputtingitbackintothetextarea?【发布时间】：2010-10-1005:52:02【问题描述】：用户将在文本区域中输入文本。... 查看详情

jQuery - 从文本区域中删除用户输入文本

】jQuery-从文本区域中删除用户输入文本【英文标题】：jQuery-removeuserinputtextfromtextarea【发布时间】：2011-10-2921:01:43【问题描述】：好的，我有一个设备列表，我可以在其中选择要编辑的设备。我有3个状态可供编辑。未选择任何... 查看详情

即使文本区域没有焦点，也能指示选定的文本

】即使文本区域没有焦点，也能指示选定的文本【英文标题】：Indicatingselectedtextevenwhenthetextareadoesn\'thavethefocus【发布时间】：2019-10-2406:53:21【问题描述】：在Firefox和Chrome中，文本字段的文本选择（=在字段中选择的文本范围）仅... 查看详情

从文本区域中删除 jquery 弹性

】从文本区域中删除jquery弹性【英文标题】：removingjqueryelasticfromatextarea【发布时间】：2012-03-2901:17:36【问题描述】：我正在使用jqueryelastic来随着内容的增长自动调整文本区域的高度。我的文本区域有id#statusupdate所以要对它应用... 查看详情

如何获取文本区域中选择的起点和终点？

】如何获取文本区域中选择的起点和终点？【英文标题】：Howtogetthestartandendpointsofselectionintextarea?【发布时间】：2011-03-0411:17:52【问题描述】：我想获取文本字段或文本区域中选定范围的光标开始和结束位置。Itriedlotoffunctionsinvar... 查看详情

ko.JS 数据绑定从文本区域获取输入 - 不捕获 /n

】ko.JS数据绑定从文本区域获取输入-不捕获/n【英文标题】：ko.JSdatabindingtofetchinputfromTextArea-Notcapturing/n【发布时间】：2017-02-1311:21:29【问题描述】：下面是我的文本区域代码。<div><textareadata-bind="value:environment"rows="10"cols="20... 查看详情

如何在文本区域（坐标）角度中获取位置突出显示的文本？

】如何在文本区域（坐标）角度中获取位置突出显示的文本？【英文标题】：Howtogetpostitionhighlightedtextintextarea(coords)angular?【发布时间】：2022-01-2310:05:17【问题描述】：我想在textarea中获得类似的东西。我无法将textarea更改为content... 查看详情

多个文本区域上的 flex 编辑菜单操作

...一些文本，然后我选择一个菜单项“剪切”，那么它应该从文本区域中剪切选定的文 查看详情

java示例代码_从文本区域创建指向其他阶段的超链接

java示例代码_从文本区域创建指向其他阶段的超链接 查看详情

如何在 html 文本区域中逐行读取文本？ [复制]

】如何在html文本区域中逐行读取文本？[复制]【英文标题】：Howtoreadtextlinebylineinahtmltextarea?[duplicate]【发布时间】：2013-07-0920:12:29【问题描述】：如何逐行读取文本区域的内容或将文本拆分为不同的行以文本行的形式获取输入。... 查看详情

如何在javascript中检索文本区域的值

】如何在javascript中检索文本区域的值【英文标题】：Howtoretrievethevalueofatextareainjavascript【发布时间】：2010-10-2618:57:21【问题描述】：我有一个带有文本区域输入的表单。我正在使用JQuery通过AJAX请求提交表单以更新数据库。我的... 查看详情

如何在本机反应中从 json 获取数据？

】如何在本机反应中从json获取数据？【英文标题】：Doesanyoneknowhowtofetchdatafromjsoninreactnative?有谁知道【发布时间】：2016-06-2012:48:54【问题描述】：我是reactnative的新手，我需要从JSON文件中异步获取输入字段中更改文本的信息。JSO... 查看详情

java示例代码_如何在jsp中从html文本区域行字符串java中给出

java示例代码_如何在jsp中从html文本区域行字符串java中给出 查看详情

如何在文本区域中显示文本的结尾

】如何在文本区域中显示文本的结尾【英文标题】：Howtoshowtheendoftextinatextarea【发布时间】：2018-07-1815:33:01【问题描述】：我有一个HTML页面，其中包含一个带有长文本的文本区域。目前，当我打开页面时，我会在textarea中看到文... 查看详情