Laravel12 quill.jsの導入方法とオプションの設定について

quilljsの導入方法とオプションの設定について

内容

今回、個人開発を進めているwebアプリにてリッチテキストエディタを導入したく、色々なエディタを調べていたがブログ感覚で書けるようなものが良いかもといった点で、「quilljs」を導入してみる事にしました。自身の忘備録としても簡潔にまとめるので導入する事がある方は参照いただけますと幸いです。

quilljsとは??

公式サイトを見てもスター数が多く信頼されているリッチテキストエディタでして、リクエストに渡すValueに関してもhtml構造やjson形式など選択が可能な柔軟な良いヤツ..なイメージです。
(他のエディタとも比較をした情報を出したかったですが、何せ使用したものがないので上記のようなうっすい内容になりました。。。比較記事は私よりもすごい方が出しているので是非こちらをご参照下さい)

ちなみにquilljs公式のドキュメントについてはこちら ▼
https://quilljs.com/

導入する方法

方法については以下の通りで大きく3パターンあります。

1. npmを使用してインストールする方法
2. quillを管理しているgitからcloneする方法
3. cdnを読み込んで使用する方法

今回は上記の中で1の方法で導入を行いました。

今回導入する環境

今回の導入する環境については以下の通りです。
フレームワーク...Laravel12
言語...php
RDBMS...mysql
webサーバーソフトウェア...nginx
メールサーバー...あり
redis...あり

導入手順

①以下のコマンドを実行する

npm install quill

導入後の実装コード

quilljsを導入した後は以下の通りでコードを実装

import Quill from 'quill';
import 'quill/dist/quill.snow.css';

export function initQuill() {
  const editor = document.querySelector('#editor');
  // editorIDが存在しない場合は早期　リターン
  if (!editor) return;

  // ツールバーのオプションを設定
  const toolbarOptions = [
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
  
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

  
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],   
    ['image']     
  ];

  // Quill Editorをセット
  const quill = new Quill(editor, {
      theme: 'snow', // Themaをセット
      placeholder: '本文を入力してください...', // placeholderをセット
      modules: {
        toolbar: toolbarOptions //　ツールバーオプションをセット
      },
  });

  // テキストの変更時にdetailにvalueをセット
  const hidden = document.getElementById('detail');
  if (hidden) {
      quill.on('text-change', () => {
          hidden.value = JSON.stringify(quill.getContents());
      });
  }
}

document.addEventListener('DOMContentLoaded', () => {
  initQuill();
});

まとめ

いかがでしょうか？
皆さんも本記事を参考に導入の手助けになれば幸いです。