Closed9

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

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

このスクラップは2021/03/17にクローズされました
ログインするとコメントできます