Quill投稿フォーム実装【後編】テーマとカスタマイズ術

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

前回の続きです📝

テーマについて

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

Bubbleテーマ

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

Snowテーマ

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

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

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

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

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

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

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

import styled from "styled-components";

const FontStyle = styled.div`
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 16px;
    color: #000000;
`;

// CommentPreviewはReactQuillを使用しているコンポーネント
return (
    <FontStyle>
        <CommentPreview body={comment.body} />
    </FontStyle>
);

空段落が挿入される問題について

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

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

clipboard: {
    matchVisual: false
},

参考

Quillに関するリポジトリ紹介

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

Quillの形式変換module郡

さいごに

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

おまけ

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

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

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

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

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

関連記事：