CATEGORY

【Vue.js】リッチテキストエディタ「vue-quill-editor」の使い方

「vue-quill-editor」はVue.js製のリッチテキストエディタを実装するライブラリです。その内部構造は、GitHubで★32,685を誇る有名なテキストエディタライブラリ「Quill」で構築されています。

Quillは、シンプルなAPIで構成されているので開発者向けにも使いやすいですし、クロスプラットフォームでデスクトップ、タブレット、スマホのすべての最新ブラウザをサポートしているので、Vue CLIやNuxt.jsのプロジェクトでエディタを導入する際には候補の一つとして考えていいと思います。

開発環境

  • @vue/cli 4.5.15
  • vue@2.6.14

インストール

まずはプロジェクトにvue-quill-editorをインストールします。

npm i vue-quill-editor

NPM

実装

vue-quill-editorのインストールが完了したら、コンポーネント内でエディタを使えるようにします。実装は開発元のGithubを参考にしました。

開発元ドキュメント

コンポーネント

<template>
  <div>
    <quillEditor
        ref="myQuillEditor"
        v-model="content"
        :options="editorOption"
    />
  <div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
    components: {
        quillEditor
    },
    data: () => ({
        content: "Hellow World",
        editorOption: {
            theme: 'snow'
        },
    }),
}
</script>

コンポーネントでやっていることは、大きく3つです。

  1. vue-quill-editorのインポート
  2. コンポーネント定義
  3. エディタのオプションを定義

1. vue-quill-editorのインポート

import { quillEditor } from 'vue-quill-editor'
// エディタのテーマ
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

2. コンポーネント定義

export default {
    components: {
        quillEditor
    },
}

3. エディタのオプションを定義

data: () => ({
    content: "Hellow World",
    editorOption: {
        theme: 'snow'
    },
}),

vue-quill-editor実装結果

上記の手順で実装すると、リッチテキストエディタが表示されます。

ツールバーのカスタマイズ

リッチテキストエディタでは、文字を太字にしたり色をつけたり、リストや画像を挿入できるのが大きな特徴です。vue-quill-editorではどのツールをエディタに組み込むのかを制御できます。

下記を見てみましょう。


export default {
    components: {
        quillEditor
    },
    data: () => ({
        content: "Hellow World",
        editorOption: {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['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

                    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

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

                    ['clean']                                         // remove formatting button
                ],
            }
        },
    }),
}

dataのeditorOptionにmodulesオブジェクトを定義し、その中にtoolbar配列を用意します。このmodules > toolbarを定義しなければ一通り全てのツールがデフォルトでセットされます。ただ、よくわからないツールも多いので最低限にしたい場合は、modules > toolbarを使ってツール数を制御しましょう。

ツールバーなどのモジュールの導入については、下記の公式ドキュメントを参照してください。

Quill API document

【番外編】CDNの場合

全体を通して不明点やご指摘がありましたら、コメントを送信ください。

【Vue.js】vue-pdfを使ってPDFプレビューを表示する方法 前の記事 【JavaScript】時間(hh:mm)をソート(sort)する方法 次の記事

関連記事

コメント

この記事へのコメントはありません。