如何從文本區域中選擇文本作出反應？

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旨在解決的困難。

我希望有幫助。