如何从文本区域中选择文本作出反应？

Question

我正在做一个文本编辑器react.Does任何人都知道如何从textarea中选定的文本，以便风格可以应用于选定的文本。我知道我们可以在javascript中使用window.getSelection，但我很好奇知道如果有任何其他方法可用于此功能？

Answer 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步： - 现在你可以访问DOM元素，使用react refs。

let textVal = this.refs.myTextarea; 

第3步： - 使用selectionStart和选定结束： - 使用selectionStart和
选定结束，你可以了解你的起点和终点指针
选择text.which的 可以按以下步骤进行;

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

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

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

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

Answer 2

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

如果您使用的是React，则需要使用DraftJS。它将您在尝试从头创建自己的文本编辑器时面临的许多挑战抽象出来。这包括管理编辑器的状态（类似于管理组件状态的方式），管理文本选择，应用不同的属性等等。

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

我希望有帮助。