ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック

2024/6/28 23:272025/3/13 0:18

ノート共有型SNS『eeNotes』の投稿フォームにQuillを導入！テーマの違いやカスタマイズの工夫、タグの変更方法などを詳しく解説。

前回の続きです📝

テーマについて

Quillには、BubbleとSnowというテーマがあります。

と指定すると以下のような表示になります。Bubbleテーマの特徴は、文字を選択した時にホップアップ表示で当てるスタイルを選ぶことが出来る点です。

と指定すると以下のような表示になります。私たちは、文字選択時にはマーカー機能を実装したかったこともあり、こちらのテーマを選定しました。

Quillのデフォルトのタグはで記述されています。

任意のタグに変更する場合は、以下の設定を追記すれば良いです。

私たちのプロジェクトでは、Quillの設定ファイルをに記述しています。

そして、divタグに変換したUI要素に対して以下のようなコードでCSSを当てています。デフォルトでは行間が狭く窮屈な感じだったためを指定したりしています。

Quill Version: 1.3.7において、編集した文字列のDOMを更新した際などにといった空段落が挿入されてしまう問題がありました。

以下の設定を追記することで解決出来ます。

Quillに関するリポジトリが列挙されています。

QuillはGitHubに公開されているmoduleも含めるとカスタマイズ性はかなり高く、良いライブラリだという所感です。最後まで読んでいただきありがとうございました😄

eeNotesのチームメンバーがそれぞれ記事を書いてくれているので、ぜひ見てみてください！

インフラ基盤構成については @_tetsuya28 が

サーバーサイドについては @kozamurai が

フロンドエンドについては @schktjm が

チーム開発の流れについては @assassinEng が