Nuxt.js vue-quill-editor 圖片 上傳 保存

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編輯框插入圖片后會直接上傳至后端服務器以圖片格式保存到文件夾中。然后生成一條圖片超鏈接再存入數據表。