JavaScriptでエディタが作れるフレームワーク draft-jsを使ってみる

draft-jsは、JavaScirptでリッチテキストエディタの実装をするフレームワークで、数あるエディタ・ライブラリの中で随一の人気を誇り、開発元である、Meta (Facebook) 社の投稿フォームや、Twitterのツイート入力にも使われています。

前提

• React（もしくは Next）のプロジェクトは作成済みであること
• Nodeは v17.4.0を使用

インストール

npm install で draft-jsを Reactのプロジェクトに追加する。

npm install draft-js

TypeScirptを使っている場合は、追加で以下も実行する。

npm install --save-dev @types/draft-js

使ってみよう

もっともシンプルな構成で、draft-jsのエディタ・コンポーネントを使ってみる。

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

function SampleApp() {
  const [editorState, setEditorState] = useState(
    () => EditorState.createEmpty(),
  );

  return (
    <div style={ {width: "600px", minHeight: "300px", background: "#eee"} }>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
      />
    </div>
  );
}

export default EditorApp;

実行すると、こんな感じになる。

他のライブラリなどであれば、太字や文字色などを変更するツールバー的な物がデフォルトで実装されていることがあるが、draft-jsはエディタ領域のみの提供で、ツールーバーやキーボードショートカットなどの機能は自前で実装する必要がある。（へルパクラスがあるので、実装はそれほど大変ではない）

カーソルを合わせると入力が可能。