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编辑框插入图片后会直接上传至后端服务器以图片格式保存到文件夹中。然后生成一条图片超链接再存入数据表。