反応のテキスト領域から選択したテキストを取得する方法は？

Question

私はリアクションでテキストエディタを作ろうとしています。誰も選択したテキストをテキストエリアから取得してスタイルを選択したテキストに適用する方法を知っています。私はjavascriptでwindow.getSelectionを使用できますが、他の方法がこの機能に利用できるかどうか

Answer 1

はいこれを行う方法は、特にReactにあります。あなたがこれを達成するために行くべき方法は以下の通りです。

ステップ1：textarea UIエレメントでrefを使用します。 like

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

手順2：ここでは、反応参照を使用してDOM要素にアクセスできます。

let textVal = this.refs.myTextarea; 

ステップ3： - したselectionStartとselectionEndにを使用します - したselectionStartを使用して、あなたの開始と終了ポインタ選択text.whichの
を知ってもらうことができます
selectionEndには、以下のように行うことができます。

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

あなたの選択したテキストの開始と終了のインデックスがあります。

手順4： - 選択したテキストを取得するには、javascript substring関数を使用します。

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

Answer 2

Reactでテキストエディタを作成する最も良い方法は、DraftJSを使用することです。

Reactを使用している場合は、DraftJSがこれを実行する方法です。独自のテキストエディタを作成する際に直面する多くの課題を抽象化します。これには、エディタの状態の管理（コンポーネントの状態の管理方法と同様）、テキスト選択の管理、異なる属性の適用などが含まれます。

あなたはget started by checking out the docsとすることができます.DraftJSが解決しようとする難しさを通っているそのページの紹介ビデオを見てみることをお勧めします。

私は役立つことを願っています。