Quillを調べたり手を動かしてみて

Reactで使用するWYSIWYGエディタ、何が良いだろう...

• https://quilljs.com/
• https://draftjs.org/
• https://editorjs.io/
• https://imperavi.com/redactor/
• https://github.com/yabwe/medium-editor
• https://github.com/ckeditor/ckeditor5

これだけリストアップしたがquillしか使ってない。draft.js, editor.js が気になってる。

https://github.com/zenoamaro/react-quill/ を使ってみての感想

• toolbarなどのカスタマイズ可能
• ul, ol の階層化は class で指定して margin-left を当てることで実現している
  • 出力した html を sanitize して他のcomponentで表示する際に quill と同じ class を当てる必要がある
• pluginを作成・追加することが可能
• li 内のテキストにフォントサイズやカラー変更をしても li > span 内のテキストに当たるので list-style-type にはカラーが当たらない
• ドキュメント…型定義…調べ尽くすとやっと見つかる感じ

slackのweb版ではquillを使ってる
編集途中にmarkdown反映する機能あったりするが、独自でplugin作ったんだろうな
listのインデントは入れ子ではなくstyleでカバーしてる。

slackに近いものでweb版のGoogleカレンダーの説明欄がある。ライブラリなに使ってるかは分からなかったがquillではなさそう。
listは入れ子で表現できるようになってるので羨ましい

TwitterやFacebookはdraft.js使ってるらしい？
editor.jsはIE対応してない

WYSIWYGと言っても

• slackやGoogleカレンダーの説明くらいのもの
• 記事をくらいの文章量

とかでオススメのライブラリ変わりそう

quillは完璧ではないにしろ良いライブラリだなと思ってて、というのもカスタマイズ余地を残してるから。

今後toolbarをカスタマイズしてより使いやすくしようと思ってる。slackとかだと bold のアイコンにマウスホバーしたときにtooltipでてくるあれを追加したい。

quill.clipboard.addMatcher(selectorOrNodeType, callback)

selectorOrNodeType ごとに1つしか callback を指定できない

というわけでプラグイン作ったので記事にする。記事にしたらclose