テキストエディタライブラリ比較【前編】react-quill & Editor.jsの特徴と選定ポイント
react-quillとEditor.jsを中心に、テキストエディタライブラリの特徴・利点・懸念点を比較。選定のポイントを詳しく解説！
以前、ノート共有型SNSの投稿フォーム実装についてご紹介という記事でreact-quillのことについて紹介させていただきました。今回は、Reactに対応している複数のテキストエディタライブラリがあった中で、どのように比較検討しQuillを選定することになったのか書いていきたいと思います。
ノート共有型SNSの投稿フォーム実装【前編】react-quill選定の理由とカスタマイズポイント2024/6/5 23:272025/3/4 0:17ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック2024/6/5 23:272025/3/4 0:18比較したテキストエディタライブラリ
比較項目
- データ構造
- 編集前と編集後の差分を保持出来る形式であるか
- 利点
- 懸念点
react-quill
データ構造
- Deltaという独自のデータ構造
Delta形式
利点
- 日々メンテナンスが行われていて、開発が活発 2020/08/23時点
- のメニューは自由にカスタマイズ可能
- 入力された情報を都度検知出来る
- 選択された文字の色・背景色を変更することが可能
- 写真・URLでビデオが入れられる
- moduleを使うことでカスタマイズが容易
懸念点
- 閲覧者モード(Read only mode)は提供されている機能として備わっていない
- 閲覧者モードとは、プレビューのみで編集は出来ないモードを指します。Qiitaでいうプレビューモードです。
- の位置を変更しUIを調整する & 閲覧者モードでは不要のイベントハンドラを無効にすることで対応可能
Editor.js
データ構造
- JSON形式
とという概念があり、単位でオブジェクトが管理される。
太字やハイパーリンク,文字の色・背景色はInlineで定義され、HTMLタグで表現される。
対応形式
公式で用意されているスタイルは以下の通りです。自作したスタイルを設定することも可能。
Block
- Header(h1, h2, ...)
- Image
- List
- Link
- Code
- Quote
- Delimiter
- Table
- Raw HTML
Inline
- Bold
- Italic
- Link
- InlineCode
- Maker
利点
- 選択文字列の色・背景色を変える機能が用意されている
- ショートカットが定義可能
- から他のへの変換ができる（h1->h2, text->List, etc...）
- の入れ替えが出来る
懸念点
- 閲覧者モード(Read only mode)は実装中 2020/08/23時点
- 現段階で実現するのであれば、, ツールの閲覧者バージョンを実装する必要があると考えられる。
- の並び替え機能との新規追加を無効にできれば、閲覧者モードとして使えそうだが、本家のJSをオーバーライドする必要が生まれるかもしれない。私たちの結論としては、自分たちでカスタマイズするには実装コストが大きい。
その2へ
テキストエディタライブラリ比較【後編】PELL & trixの特徴と選定ポイント2024/6/5 23:272025/3/4 0:13署名2025/3/3 16:552025/4/1 23:47