【WYSIWYG】Quillエディターを実際に使ってみた

2022 6/21

2022年6月21日 2022年6月21日

今回は公式のQuillを実際につかっていきたいと思います

下記のドキュメントをもとにした方法に加えて、別途手を加えていきます

あわせて読みたい

【WYSIWYG】Quillエディターを調査この記事はWYSIWYG実装のために、Quillの内容を翻訳しながら読み進めたものになります。【参考ドキュメント】シンプルに公式ドキュメントを利用していきます【ダウン…

まずはnpmインストールをしていきます

npm install quill@1.3.6

npmインストールをしたら、下記をapp.jsに追加し、cssを読み込みます。

// Quill
import 'quill/dist/quill.core.css' 
import 'quill/dist/quill.snow.css' 
import 'quill/dist/quill.bubble.css'

Quillを読み込むために、Editor.vueを作成します

<template>
    <div ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import { Store } from '@/stores/Store.js';

export default {
  props: {
    value: {
        type: String,
        default: ''
    }
  }, 
  data() {
    return {
      State: Store.state,
      editor: null
    };
  },
  mounted() {
    this.editor = new Quill(this.$refs.editor, {
        theme: 'snow',
        debug: false,
        placeholder: '本文を入力してください',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike', 'link'],
            [{ 'color': [] }, { 'background': [] }], 
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'align': [] }],
          ]
        },
    });

    this.editor.root.innerHTML = this.value;
    Store.setBodyLength(this.editor.getLength());

    this.editor.on('text-change', () => this.update());
  },
  methods: {
    update() {
      Store.setNoticeBodyLength(this.editor.getLength());
      Store.setNoticeBody(this.editor.root.innerHTML);
      this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
    }
  }
}
</script>

あとはこちらを読み込みます

<editor v-model="Article.body"></editor>

これで利用可能です。

今回使用したオプションは最小限となっています。

          toolbar: [
            ['bold', 'italic', 'underline', 'strike', 'link'],
            [{ 'color': [] }, { 'background': [] }], 
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'align': [] }],
          ]

実際にはもっとあるため、いろいろ試してみるとよいでしょう

文字数を取得するため、getLength()を利用します。