比較したテキストエディタライブラリ

• react-quill

• Editor.js

• MediumEditor

• PELL

• trix

比較項目

• データ構造
• 編集前と編集後の差分を保持出来る形式であるか

• 利点

• 懸念点

react-quill

• Quill - 紹介ページ

• Quill - Demo

• quill - GitHub

• react-quill - GitHub

データ構造

• Deltaという独自のデータ構造

利点

• 日々メンテナンスが行われていて、開発が活発 2020/08/23時点

• のメニューは自由にカスタマイズ可能

• 入力された情報を都度検知出来る

• 選択された文字の色・背景色を変更することが可能

• 写真・URLでビデオが入れられる

• moduleを使うことでカスタマイズが容易

懸念点

• 閲覧者モード(Read only mode)は提供されている機能として備わっていない
• 閲覧者モードとは、プレビューのみで編集は出来ないモードを指します。Qiitaでいうプレビューモードです。
• の位置を変更しUIを調整する & 閲覧者モードでは不要のイベントハンドラを無効にすることで対応可能

Editor.js

• Editor.js - 紹介トップページ
• Editor.js - 機能紹介ページ

• Editor.js - GitHub

データ構造

• JSON形式

対応形式

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へ