Question

我正在尝试使用文本编辑器。有人知道如何从textarea中获取所选文本，以便可以在所选文本上应用样式。我知道我们可以在javascript中使用window.getSelection但我是很想知道如果有任何其他方法可用于此功能？

Answer 1

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

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

func applicationDidBecomeActive(_ application: UIApplication) {
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    print("app did become active")

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

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

步骤3： - 使用selectionStart和selectionEnd： - 使用selectionStart和
selectionEnd你可以了解你的开始和结束指针
选定的文本。可以按如下方式完成;

    let textVal = this.refs.myTextarea;

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

步骤4： - 使用javascript substring函数获取所选文本。

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

Answer 2

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

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

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

我希望有所帮助。

如何从文本区域中获取所选文本？

2 个答案: