draft-jsで入力されているテキストを取得する

Draft-jsは、JavaScriptを使用してリッチテキストエディタを実装するための高度にカスタマイズ可能なフレームワークです。この記事では、Draft-jsを使ってエディタに入力されているテキスト内容を様々な方法で取得する方法をわかりやすく説明します。

スポンサーリンク

はじめに

はじめに、Draft-jsの基本的なエディタコンポーネントを設置し、動作確認を行います。以下のReactコンポーネントを使用してエディタをセットアップし、カスタムスタイルマップを適用します。

import { useState } from 'react';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';

function SampleEditor() {
  const [editorState, setEditorState] = useState(
    () => EditorState.createEmpty(),
  );
  
  return (
    <>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        customStyleMap={customStyleMap}
      />
    </>
  );
}

export default SampleEditor;

テキスト全文の取得（一番簡単）

Draft-jsでエディタに入力されたテキスト全文を取得する最も簡単な方法は、ContentState#getPlainText() メソッドを使用することです。このメソッドは、エディタの現在のテキスト内容を返します。

editorState.getCurrentContent().getPlainText()

入力値	実行結果
テキスト１ テキスト２ テキスト３	テキスト１ テキスト２ テキスト３

区切り文字を指定する

getPlainText() メソッドに区切り文字を引数として渡すことで、エディタ上のテキストを指定された区切り文字で区切って取得することができます。例えば、カンマを区切り文字として指定すると、以下のようになります。

editorState.getCurrentContent().getPlainText(",")

入力値	実行結果
テキスト１ テキスト２ テキスト３	テキスト１,テキスト２,テキスト３

ブロック単位に取得

テキストをブロック単位（改行ごと）で取得したい場合は、ContentState#getBlocksAsArray() 関数を使用します。この関数は、テキストの各ブロックを配列として返します。各ブロックからテキストを取得するには以下のようにします。

var text = editorState.getCurrentContent().getBlocksAsArray();
text.map((item) => {
  console.log(item.getText());
});

入力値	実行結果
テキスト１ テキスト２ テキスト３	0:テキスト１ 1:テキスト２ 2:テキスト３

スポンサーリンク

１文字単位に取得

エディタに入力された各文字とその文字に適用されているインラインスタイルを取得することも可能です。以下の例では、各ブロックを処理し、各文字とそのスタイルを出力します。

var blocks = editorState.getCurrentContent().getBlocksAsArray();
blocks.map(block => {
  const text = block.getText();
  block.getCharacterList().map((metadate, index) => {
    const char = text.substr(Number(index), 1);
    //対象の１文字に適用されているインラインスタイルを取得（カンマ区切り）
    const inlineStyles = metadate?.getStyle().join(",");
    //対象の１文字とインラインスタイルを出力
    console.log(char + "（" + inlineStyles + "）");
  })
});

■エディタへの入力内容

例えば、「draft-jsで開発！」と入力した場合、出力される結果は以下のようになります。

■実行結果

d（BOLD）
r（BOLD）
a（BOLD）
f（BOLD）
t（BOLD）
-（BOLD）
j（BOLD）
s（BOLD）
で（）
開（red,BOLD）
発（red,BOLD）
！（red,BOLD）