✍️

React用リッチテキストエディタDraft.jsを始めるときに知りたかったこと

2022/02/04に公開

Draft.jsとは

Draft.jsはMeta(旧Facebook)社が開発しているReact用のリッチテキストエディタのフレームワークです。

このようなエディタが作れます。(上記リンク先でデモが見られます)

Draft.jsはリッチテキストエディタそのものではなく、リッチテキストエディタを作成するためのフレームワークです。初期状態ではただのテキストエリアです。

太字などを選択するボタンはフレームワークに含まれてはいないので自分で用意する必要があります。

ボタンが押されたときの動作も自分でプログラミングする必要があります。

Draft.jsの雰囲気をつかむために、はじめに公式のgithubのexampleのrich.htmlを見るのがおすすめです。H1, H2などのブロックレベルのスタイル、BOLD, ITALIC, UNDERLINEなどのインラインスタイルの切り替えの実装やキーバインドの実装例が見られます。

Draft.jsを始めるのが少し難しかったので、この記事が助けになれば幸いです。