vue中使用vue-quill-editor富文本小结（图片上传

       vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，通常来讲，每个服务器端接收的post的数据大小都是有限制的，这样的话有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。
1.下载Vue-Quill-Editor

   npm install vue-quill-editor --save

2.下载quill（Vue-Quill-Editor需要依赖）

    npm install quill --save

3.使用

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

    本次使用到了富文本的封装和上传图片,因要求使用element-ui框架，我上传图片的时候选择了element-ui的Upload上传组件将图片上传到服务器。再将图片链接插入到富文本中，以达到最优的体验。

子组件中将改变的值，直接发送给父组件，父组件来完成逻辑处理

<template>
  <div>
    <el-upload            //直接隐藏掉就好了，用功能不用样式
      v-show="false"
      id="quill-upload"
      action="/api/product/upload.do"
      name="upload_file"
      multiple
      :limit="3"
      list-type="picture"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-error="uploadError"
      :on-success="handleExceed">
      <el-button size="small" type="primary" ></el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-row v-loading="uillUpdateImg">
      <quillEditor
        ref="myQuillEditor"
        @change="onEditorChange($event)"
        v-model="value"
        :options="editorOption"/>
    </el-row>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: "richText",
  components:{quillEditor},
  props:['content'],                              //父组件传过来的，将传过来的渲染到富文本编辑器
  data(){
    return{
      uillUpdateImg:false,                        //根据图片上传状态来确定是否显示loading动画
      serverUrl:'',  //上传的图片服务器地址
      value:this.content,                         //富文本内容
      editorOption: {                             //符文本编辑器的配置
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [                          // 工具栏配置, 默认是全部
              ['bold'],
              ['italic'],
              ['underline'],
              ['strike'],
              [{'list':'ordered'},{'list': 'bullet' }],
              ['blockquote'], ['code-block'],
              ['link'],
              ['image'],
              [{'list': 'ordered'}, {'list': 'bullet'}],
            ],
            handlers: {
              'image': function (value) {
                if (value) {
                  // 给个点击触发Element-ui，input框选择图片文件
                  document.querySelector('#quill-upload input').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      }
    }
  },
  methods:{
    onEditorChange({ quill, html, text }) {      //富文本编辑器内容发生改变的时候
      this.value = html
      this.$emit('textChange',html)              //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
    },
    beforeUpload(){                              //上传图片之前开启loading
      this.uillUpdateImg = true
    },
    uploadError(){                              //图片上传失败,关闭loading
      this.uillUpdateImg = false
      this.$message.error('图片插入失败')
    },
    handleExceed(response, file, fileList){     //图片添加成功
      let quill = this.$refs.myQuillEditor.quill
      console.log(response)
      if (response.status === 0) {
        let length = quill.getSelection().index;
        // 插入图片  response.data.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', response.data.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      }else{
        this.$message.error('图片插入失败')
      }
      this.fileList = fileList
      this.uillUpdateImg = false
    },
  }
}
</script>

<style scoped>

</style>

配置中的handlers是用来定义自定义程序的，然而我们配置完后会懵逼地发现，整个富文本编辑器的工具栏的图片上传等按钮都不见了 只保留了几个基本的富文本功能。

这个是因为添加自定义处理程序将覆盖默认的工具栏和主题行为
因此我们要再自行配置下我们需要的工具栏，所有功能的配置如下，大家可以按需配置，这里看起来一大堆，也不美观，大家也可以配置一个单独的config文件引入。

      有一点注意的地方，父组件中传入子组件中的值，子组件里面发生改变以后再传给父组件。将变量时存放在props属性中的，我们在调用变量的时候是跟data里面的变量一样的，都是通过this.变量来调用，这个问题就是说父组件传入子组件的变量是不能this.变量直接改变的，要在data或者computed属性里面重新定义一个变量，或者监听props接受变量的变化。改变data或者computed属性里面的变量就不会报错了。