テキストエディタライブラリ比較【前編】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小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる
── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。
「自分の可能性をもっと広げたい」
「モヤっとしたアイデアがあるけど、どう進めていいかわからない」
そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。
「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
🌐 詳しいプロフィールはこちら
https://obata-tomu.jp/