wysiwygエディタの特徴と比較

今回比較するwysiwygエディタ

1. Quill
2. tiptap
3. Editor.js

いろいろと探した中で、この３つが実績、機能、UIなどの点でよいと思ったため、候補とする。
これらの中から比較して、実際に開発に使用するものを選定する。

Quill

特徴

• npmのインストール数が圧倒的に多い
• 初期リリースが2014年で他よりも歴が長い
• 共同編集のためのライブラリYjsの例で使われている

歴が長く、インストール数も多いため、信頼できる。
また、共同編集を導入したい場合、Yjsというライブラリを使うと思うが、
その時に、他のエディタだと対応していなかったり、バグが起きたりするリスクがあるが、
QuillはYjsの例で取り上げられているため、安心できる。

tiptap

特徴

• 拡張機能が豊富
• ヘッドレスで軽い
• Yjsとの相性も良い
• reactやvue.jsなどのフレームワークと相性がいい

tiptapは拡張機能を多く用意してくれているため、カスタマイズが容易。
また、ヘッドレスなのでUIは自分で作る必要がある。
tiptapはProseMirrorというエディタをフレームワークに合うようにラップしたものなので、
reactやvue.jsを使うのであれば、相性が良い。

Editor.js

特徴

• 見た目がモダン
• カスタマイズの自由度が高い

Editor.jsは他と大きく見た目が異なる。今流行りのnotionのようなUIになっていて、
おしゃれでモダンな感じがする。
また、カスタマイズに関しては、jsを書きさえすればかなり自由度の高いカスタマイズができる。
ただ、その分コーディング力は必要になる。

まとめ

特にこだわりがないならQuill、
reactやvue.jsなどのフレームワークを使うならtiptap、
モダンでおしゃれな見た目が良いならEditor.js