Nuxt.jsでQuillベースのエディタープラグインを導入

記事投稿機能を作るためワードプレスのようなエディタを探していたところQuillに行き着いたので導入してみた。

環境

インストール

Nuxt.jsプロジェクト下で下記をインストール

yarn add vue2-editor

pluginsの設定

plugins/quill.js

import Vue from "vue"
import Vue2Editor from "vue2-editor"

console.log(Vue2Editor)
Vue.use(Vue2Editor)

nuxt.config.jsの設定

nuxt.config.js

plugins: [
    { src: '~plugins/quill.js', ssr: false }
],

エディタの設定

読み込みができたら次はVueファイルで読み込み

<template>
  <div class="container">
    <no-ssr placeholder="Loading Your Editor...">
      <vue-editor
        id="editor"
        v-model="content"
        useCustomImageHandler
        @imageAdded="handleImageAdded"
      />
    </no-ssr>
    <div v-html="content" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      const formData = new FormData()
      formData.append('image', file)
      const config = {
        headers: {
            // header setting
        }
      }
      this.$axios.$post('/api_url', formData, config)
        .then((result) => {
          const url = result.data.url // Get url from response
          Editor.insertEmbed(cursorLocation, 'image', url)
          resetUploader()
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err)
        })
    }
  }
}
</script>

やっていること

SSRされると使えないので、されないようにno-ssrで囲む
vue-editorタグでコンポーネントを呼び出し
画像がアップロードされたらaxiosでPOST

使い方

Props

ドキュメントを元に翻訳

Name	Type	Default	Description
id	String	quill-container	IDの設定 Vueファイル上に複数のエディターを設置する場合に必要
v-model	String	-	v-htmlなどで出力するとプレビューがみれる
useCustomImageHandler	Boolean	false	Base64へのデフォルト変換を使用する代わりに画像のアップロードを処理する
placeholder	String	-	Placeholderの設定
disabled	Boolean	false	エディターの無効下
customModules	Array	-	登録するQuillモジュールの設定
editorToolbar	Array	-	カスタムツールバーを設定
editorOptions	Object	-	エディターにオプションを追加（フォーマットの追加、カスタムQuillモジュールなど）

Events

Name	Parameters	Description
focus	quill	focusイベントで発火
blur	quill	blurイベントで発火
selection-change	range, oldRange, source	selection-changeイベントで発火
text-change	delta, oldDelta, source	text-changeイベントで発火
imageAdded	file, Editor, cursorLocation	useCustomImageHandlerがtrueの時にエディターに写真が追加されたら発火

　まとめ

Quillエディタ初めて使ってみたけど、使いやすいイメージ
Ajax処理で基本的にはサーバーとのやり取りをしつつ最後に
構築されたHTMLをデータベースに格納すればいいかなと

欲を言えばHTMLを直接記述できるエディタもほしい

Nuxt.jsにQuillエディター（WYSIWYGエディタ）いれてみた