vue富文本编辑器（vue-quill-editor）

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

原生quill.js上传图片会自动转成base64格式的，我这边生成的html直接存到mysql的字段中的，base64太大了，quill-image-extend-module是quill的扩展，为了上传图片到服务器并获取图片地址，这个上传的后端接口很容易写，和elementUI的上传接口一致。

<template>
  <div class="quill-wrap">
    <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" />
  </div>
</template>
<script>
import 'quill/dist/quill.snow.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
  components: { quillEditor },
  data() {
    return {
      content: '',
      editorOption: { // 富文本框参数设置
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',
            action: 'http://127.0.0.1:7001/yun/upload',
            response: (res) => {
              return `http://127.0.0.1:7001/public/uploadfile/${res.data.filename}`
            }
          },
          toolbar: {
            container: container,
            handlers: {
              'image': function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  }
}
</script>
<style>
.ql-container {
  min-height: 300px;
}
.quill-editor {
  width: 880px;
}
</style>

这是我写在页面中的效果

quill的详细文档 ：https://www.kancloud.cn/liuwave/quill/1409423

下一篇我记录一下自己遇到的问题和解决方案。

注：除了quill，还可以选用tinymce