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

前回の続きです📝

ノート共有型SNSの投稿フォーム実装【前編】react-quill選定の理由とカスタマイズポイント

テーマについて

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

Bubbleテーマ

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

Bubbleテーマの様子 | Bubbleテーマの様子

Snowテーマ

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

Snowテーマの様子 | Snowテーマの様子

デフォルトのタグを変更する方法

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

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

• Config/quill.js

// デフォルトのタグを<p>から<div>に変更
const Block = Quill.import("blots/block");
Block.tagName = "DIV";
Quill.register(Block, true);

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

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