1. 安裝vue-quill-editor (Git地址)

npm install vue-quill-editor --save

2. 在Nuxt.js框架中配置

plugins資料夾中新建：vue-quill-editor.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
 
Vue.use(VueQuillEditor)

3. 在nuxt.config.js中配置

plugins: [
    { src: "@/plugins/vue-quill-editor", ssr: false
 
 }, // 文字編輯器
  ],

在.vue檔案中即可使用vue-quill-editor編輯器，可以將其定義在一個元件中在專案中使用。

此時使用vue-quill-editor編輯新增圖片的時候，圖片是預設以base64字串直接存入資料表。

如果想將編輯框裡面匯入的檔案以獨立的圖片檔案存入伺服器資料夾中，可以另外安裝外掛：quill-image-extend-module （Git地址）

npm install quill-image-extend-module --save-dev

Nuxt.js中就不需要再通過plugins方式使用vue-quill-editor

1. 建立.vue檔案作為components

<template>
  <section class="quill-editor-container">
    <div class="quill-editor"
      :content="qcontent"
      @change="onEditorChange($event)"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      v-quill:myQuillEditor
 
="editorOption">
    </div>
  </section>
</template>

<script>
import Vue from 'vue'
export default {
  props: {
    content: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      qcontent: this.content,
      editorOption: null
    }
  },
  // 在Nuxt.js框架中因為是後端渲染，所以為了使用image上傳外掛，在此處初始化和引入vue-quill-editor和quill-image-extend-module外掛
  beforeMount () {
    const VueQuillEditor = require('vue-quill-editor/dist/ssr');
    const Quill = require('quill');
    const {ImageExtend, QuillWatch} = require('quill-image-extend-module');
    this.editorOption = {
        bounds: 'app',
        placeholder: '',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',              // 後端接收的檔名稱
            action: '/api/imgUpload', // 後端接收檔案api
            response: (res) => {
              return res.data.path // 此處返回的值一定要直接是後端回饋的圖片在伺服器的儲存路徑如：/images/xxx.jpg
            }
          },
          toolbar: {
            handlers: {
              'image': function () {
                QuillWatch.emit(this.quill.id)
              }
            },
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }],
              ['blockquote', 'code-block'],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              ['link', 'image', 'video']
            ]
          }
        }
    }
    Quill.register('modules/ImageExtend', ImageExtend); 
    Vue.use(VueQuillEditor)
  },

  methods: {
    onEditorBlur(editor) {
      this.$emit('update:number', editor.getText().trim().length)
    },
    onEditorFocus(editor) {
      
    },
    onEditorReady(editor) {
      this.$emit('update:number', editor.getText().trim().length)
    },
    onEditorChange({ editor, html, text }) {
      this.qcontent = html
      this.$emit('update:content', this.qcontent)
    }
  }
}
</script>

在vue-quill-editor編輯框插入圖片後會直接上傳至後端伺服器以圖片格式儲存到資料夾中。然後生成一條圖片超連結再存入資料表。