React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集

BRANK

昨年、弊社でフロントエンド開発を担当した案件で Draft.js を活用してリッチテキストエディタの実装をおこないました。そもそも、Draft.js は React 上でリッチテキストエディタを構築するライブラリで、同種のライブラリのなかでは随一の人気を誇ります。Draft.js の基本的な解説については、以下のスライドがわかりやすいので、知りたい方は参照してみてください。React.js, Draft.jsで作る リッチテキストエディタ開発入門Draft.js は世界的に見ればメジャなライブラリですが、日本語の情報が多いとは言い切れません。ですので、すこしでも特殊な実装をする際に頼れる情報がほとんどない、という状況に多々遭遇します。そこで今回は、 同じ轍を踏んで欲しくないという思いを込め、Draft.js を使ったリッチテキストエディタの実装において、実践的なケースをいくつかご紹介します。最もミニマムな構成Draft.js を用いてリッチテキストエディタを構成するうえで最もミニマムな構成は以下のようになります。この例のように、 Draft.js では useState を用い、エディタの状態を示すイミュータブル変数 editorState および、状態変更関数 setEditorState でエディタ内部の状…