Laravelにリッチテキストエディタ『Quill』を実装する【Quill 2.0対応】

Laravel のBladeにリッチテキストエディタ『Quill』を実装する手順を解説します。

結論から書くと、CDNを2行読み込んで new Quill() を1行書くだけで動きます。サーバー側の準備も、ビルドの設定も要りません。

この記事は2021年に公開したあと、2026年9月に見直しました。当時使っていた Quill 1.3.6 は、2024年にリリースされた Quill 2.0 系に置き換わっています。CDNのURLと配布元が変わっているので、コードをすべて2.0.3の書き方に更新しました。1.x から上げるときの注意点も最後にまとめています。

テキストエディタ『Quill』の導入方法

結論：Bladeファイルの head にCDNを読み込み、body にエディタを置く div と初期化のスクリプトを書けば完成です。

Quill.js は GitHub からソースをダウンロードすることもできますが、今回はCDNで実装します。Quill 2.0 系の配布は jsDelivr（cdn.jsdelivr.net/npm/quill@2.0.3/dist/）になりました。1.x で使われていた cdn.quilljs.com のURLは 2.0 系のファイルを配信していないので、そのままでは動きません。

Githubはこちら
https://github.com/quilljs/quill

任意のBladeファイル（例えばindex.blade.php）に、下記を記述します。

<head>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css" rel="stylesheet">
</head>
<body>
    <div id="quill_editor"></div>
    <script>
      const quill = new Quill('#quill_editor', {
        theme: 'snow'
      });
    </script>
</body>

Quillを導入するコードはこれだけです。

コード解説については後述しますので、一度ページを確認してみましょう。

こんな感じで表示されてれば成功です。

こんな簡単でいいのかというくらい簡単に実装できましたね。

この後解説を挟んでから、テーマ変更の仕方や、ツールバーのカスタマイズのやり方も解説していきます。

テキストエディタ『Quill』の導入解説

上記で実装したコードの解説をしていきます。

Quill導入に必要な記述はたったの3つです。

headタグ内にcdnを読み込む

headタグ内に、下記コードを記述します。

<head>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css" rel="stylesheet">
</head>

これで、Quill.jsとcssを読み込むことができます。

cssは2種類あるので、使いたい方を読み込みます。

cssの指定は後述します。

bodyタグ内にテキストエディタタグを記述

bodyタグ内に、テキストエディタを生成するタグを記述します。

必ず、id付きのdivタグを記述してください。idは任意の名前で大丈夫です。

このdivタグの中に、テキストエディタが生成されます。

<body>
    <div id="quill_editor"></div>
</body>

JavaScriptでテキストエディタを生成する

JavaScriptでテキストエディタを生成します。

今回は、body閉じタグ前にテキストエディタを生成するためのscriptを記述します。

<body>
    <script>
      const quill = new Quill('#quill_editor', {
        theme: 'snow'
      });
    </script>
</body>

idの部分は、先ほどdivタグに指定したidを記述します。

themeの部分は、headタグで読み込むcssと同じテーマ名を記述します。用意されているテーマは「snow」と「bubble」があります。

テーマを変更する

用意されているテーマは「snow」と「bubble」があります。

script部分のテーマ名を指定するだけで簡単に変更できます。

snow

「snow」はエディタの上にツールバーが表示されるテーマです。

bubble

「bubble」は編集したいテキストをドラッグで範囲指定するとツールチップのように表示されるテーマです。

テキストエディタをカスタマイズする

デフォルトのままだと、文字色や画像の投稿ができません。

ツールバーに表示させる内容を増やすjsコードを作成したので、下記、コピペでどうぞ。

ファイル名を「quillcustom.js」にして保存します。

/**
    関数： テキストエディタの生成
    引数： 作成する場所のid
    戻り値： Quillエディタの生成情報
**/
function quillEditor(make_id) {

    var toolbarOptions;
    var quill;
    var themes = set_themes();

    // ツールバー機能の設定
    toolbarOptions = [
        // 見出し
        [{
            'header': [1, 2, 3, 4, false]
        }],
        // フォント種類
        [{
            'font': []
        }],
        // 文字寄せ
        [{
            'align': []
        }],
        // 太字、斜め、アンダーバー
        ['bold', 'italic', 'underline'],
        // 文字色
        [{
                'color': []
            },
            // 文字背景色
            {
                'background': []
            }
        ],
        // リスト
        [{
                'list': 'ordered'
            },
            {
                'list': 'bullet'
            }
        ],
        // インデント
        [{
            'indent': '-1'
        }, {
            'indent': '+1'
        }],
        // 画像挿入
        ['image'],
        // 動画
        ['video'],
        // 数式
        ['formula'],
        // URLリンク
        ['link']
    ];

    make_id = '#' + make_id;

    // エディタの情報を生成
    quill = new Quill(make_id, {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: '本文を入力してください',
        theme: themes
    });

    return quill;
}


// テーマ設定（PCとSPでテーマを切り替える）
function set_themes() {
    var themes;
    if (window.parent.screen.width > 750) {
        themes = "snow";
    } else {
        themes = "bubble";
    }
    return themes;
}

カスタマイズしたテキストエディタを実装する

カスタマイズしたテキストエディタは、下記のように実装します。

<head>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css" rel="stylesheet">
    <!-- 上記で作成したjsを読み込む -->
    <script type="text/javascript" src="quillcustom.js"></script>
</head>
<body>
    <div id="quill_editor"></div>
    <script>
      var quill = quillEditor("quill_editor")
    </script>
</body>

先ほどに比べて、ツールバーにメニューが増えたと思います。

▼Quillのfont-familyをカスタマイズしたい方はこちらの記事をどうぞ

Web Design2021.09.06【Laravel】Quillのfont-familyをカスタマイズしてフォントを追加するリッチテキストエディタQuillのツールバーに任意のフォントを追加する方法です。attributors/style/fontのwhitelistに配列を渡して登録し直し、CSSでフォント名をラベルに出します。styleとclassの違いと、保存したHTMLをそのまま表示できる理由も解説します。

▼Quillのfont-sizeをカスタマイズしたい方はこちらの記事をどうぞ

Web Design2021.09.07【Laravel】Quillのfont-sizeをカスタマイズして文字サイズを追加するリッチテキストエディタQuillのツールバーに任意の文字サイズを追加する方法です。attributors/style/sizeのwhitelistに14pxなどの配列を渡して登録し直し、CSSでサイズをラベルに出します。remでの指定や選択肢の数の目安も解説します。

入力内容をLaravel側に保存する

結論：Quill はエディタの中身を <form> で勝手には送信しません。hidden の input を用意して、送信時にHTMLを詰め込みます。

Quill が編集しているのは <div> の中身なので、そのままでは POST されません。次のように、送信直前に値を移します。

<form method="POST" action="/posts" id="post_form">
    @csrf
    <div id="quill_editor"></div>
    <input type="hidden" name="body" id="body">
    <button type="submit">保存</button>
</form>

<script>
const quill = new Quill('#quill_editor', { theme: 'snow' });

document.getElementById('post_form').addEventListener('submit', function () {
    document.getElementById('body').value = quill.getSemanticHTML();
});
</script>

getSemanticHTML() は Quill 2.0 で追加されたメソッドです。エディタの内部用クラスを取り除いた、保存に向いたHTMLを返します。1.x でよく使われていた quill.root.innerHTML は Quill 内部のクラスまで含んだHTMLを返すので、保存先で使い回すには不向きでした。

保存した値を表示するときは、そのままでは Blade がエスケープします。HTMLとして出す場合は {!! !!} を使いますが、ユーザーの入力をそのまま出力するとXSSになります。保存前か表示前に、必ずサニタイズを挟んでください。

{!! $post->body !!}

編集画面に既存の内容を読み込む場合は、初期化のあとに dangerouslyPasteHTML() で流し込みます。

quill.clipboard.dangerouslyPasteHTML(@json($post->body));

Quill 1.xから2.0へ上げるときの注意点

結論：CDNのURL以外にも、保存済みHTMLの構造が変わる点に注意してください。すでに 1.x で記事を保存している場合は、表示側のCSSが崩れることがあります。

▼1.xから2.0での主な変更

項目	Quill 1.x	Quill 2.0
CDN	`cdn.quilljs.com/1.3.6/`	`cdn.jsdelivr.net/npm/quill@2.0.3/dist/`
箇条書き	`<ul>` と `<ol>` を使い分け	すべて `<ol>`（種類は属性で持つ）
コードブロック	専用の要素	`<div>`
HTMLの取得	`root.innerHTML`	`getSemanticHTML()` が追加
IE対応	あり	打ち切り
型定義	`@types/quill` が必要	本体に同梱（別途不要）

いちばん影響が出るのは箇条書きです。2.0 では順序なしリストも <ol> で出力され、種類は属性で区別する形になりました。表示側のCSSで ul を対象にスタイルを当てていると、2.0 で保存した記事だけ箇条書きの見た目が変わります。

既存データがある状態で上げる場合は、まず表示側のCSSが ul 前提になっていないかを確認してください。1.x で保存済みのHTMLはそのまま残るので、新旧が混在します。

このほか、strict オプションと scrollingContainer オプションが削除され、クリップボードの pasteHTML も廃止されました。1.x のコードをそのまま持ってくると、この3つで動かなくなることがあります。

まとめ

Laravelにリッチテキストエディタ『Quill』を簡単に実装できる紹介をしました。

Quillは、この記事で紹介した機能だけでなく、カラーパレットに表示させる色のカスタマイズや、書式の指定など、他にもたくさんの拡張機能が備わっています。

オススメのエディタなのでぜひお試しください。

リンク

Quill のツールバーや見た目をさらに調整する場合は、エディタ『Quill』のfont-familyをカスタマイズするとfont-sizeをカスタマイズするで、選択肢の増やし方をまとめています。

Laravel の開発環境をこれから作る場合は、Dockerを使ってLaravel/Blade環境構築からscss導入までもあわせてどうぞ。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

Book2023.03.01Webコーディングにオススメの学習本4冊【HTML/CSS/JavaScript】WebコーディングのおすすめHTML/CSS/JavaScript学習本4冊を、著者・出版社・刊行年まで明記して紹介。HTML Living Standard準拠かどうかを基準に選ぶ理由と、floatだけで段組みを説明する古い本を避ける判断方法もまとめました。

テキストエディタ『Quill』の導入方法

テキストエディタ『Quill』の導入解説

headタグ内にcdnを読み込む

bodyタグ内にテキストエディタタグを記述

JavaScriptでテキストエディタを生成する

テーマを変更する

snow

bubble

テキストエディタをカスタマイズする

カスタマイズしたテキストエディタを実装する

入力内容をLaravel側に保存する

Quill 1.xから2.0へ上げるときの注意点

まとめ

関連記事

Three.jsの影に同心円の縞が出る原因｜シャドウアクネの直し方

画像のqualityはいくつにすべきか｜JPEGとWebPで10刻みに実測した折り返し点

JPEG・WebP・AVIFを同じ画質に揃えて実測した｜ブログ写真はどれで保存すべきか

ブラウザで遊べる3Dチンチロ、Three.js＆Ammo.jsで作ったサイコロゲーム

リペリングエフェクトの仕組み 基本・応用実装例

Swapyでカンバンボードやタスク管理に実装できるUI実装【JavaScript】

リペリングエフェクトの仕組み基本・応用実装例