Nuxt.jsでQuill（WYSIWYGエディタ）を使う（テーブルも使えるようにする）

vue-quill-editorをインストール

npm i vue-quill-editorでvue-quill-editorをインストールします

プラグインを作成

• こちらに書いてある通りにインポートするプラグインを作成します

plugins/quill.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
 
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor, /* { default global options } */)

• nuxt.config.jsにプラグインを追加します
  • ※クライアントモードにするのを忘れずに！！！

nuxt.config.js

  plugins: [
    ・・・
    { src: '@/plugins/quill', mode: 'client' },
  ],

使ってみる

pages/index.vue

<template>
  <quill-editor v-model="editor" />
</template>

↓のような感じでリッチなエディタが表示されます！！！（editor変数にはサニタイズされたHTMLテキストが格納されます）

テーブルを使えるようにする

quillはデフォルトではテーブルオプションが使えないようなので、npm i quill-table-moduleでテーブルモジュールをインストールします

プラグインを修正

quill-table-moduleをインポートし、ツールバーにテーブルオプションを追加します

nuxt.config.js

import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
// 追加
import quillTable from 'quill-table-module';

// require styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

// 追加
VueQuillEditor.Quill.register(quillTable.TableCell);
VueQuillEditor.Quill.register(quillTable.TableRow);
VueQuillEditor.Quill.register(quillTable.Table);
VueQuillEditor.Quill.register(quillTable.Contain);
VueQuillEditor.Quill.register('modules/table', quillTable.TableModule);

/**
 * Quillエディターのツールバーに表示するアイテム設定
 * 参考：https://quilljs.com/docs/modules/toolbar/
 */
const editorOption = {
  modules: {
    table: true,
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      ['clean'],
      // テーブルメニューを追加
      [{ table: ['newtable_1_1'] }, { table: 'append-row' }, { table: 'append-col' }],
    ],
  },
};

Vue.use(VueQuillEditor, editorOption);

これで↓のようにテーブル操作用のメニューが追加されます！

※ツールバーモジュールのnewtable_1_1を定義している配列に要素を追加すればより多くのテーブルを定義することもできます

参考

https://quilljs.com/docs/modules/toolbar/
https://www.npmjs.com/package/vue-quill-editor
https://www.npmjs.com/package/quill-table-module
https://codesandbox.io/s/kl25i?file=/Editors.svelte:911-920