如何在react中从文本区域获取选定的文本?

IT技术 reactjs textarea
2021-05-24 10:27:20

我正在尝试在 react 中制作一个文本编辑器。有谁知道如何从 textarea 中获取选定的文本,以便可以在选定的文本上应用样式。我知道我们可以在 javascript 中使用 window.getSelection 但我很想知道如果有任何其他方法可用于此功能?

2个回答

是的,有一种方法可以做到这一点,特别是在 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) 

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

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

您可以通过查看文档开始,我建议您观看该页面上的介绍视频,其中介绍了 DraftJS 旨在解决的困难。

我希望这有帮助。