改造vue-quill-editor：实现图片上传到服务器再插入富文本

<template>
  <div>
    <quilleditor v-model="content"
                 ref="myTextEditor"
                 :options="editorOption"
                 @change="onChange"
                 >
      <div  slot="toolbar">
        <select class="ql-size">
          <option value="small"></option>
          <!-- Note a missing, thus falsy value, is used to reset to default -->
          <option selected></option>
          <option value="large"></option>
          <option value="huge"></option>
        </select>
        <!-- Add subscript and superscript buttons -->
        <span class="ql-formats"><button class="ql-script" value="sub"></button></span>
        <span class="ql-formats"><button class="ql-script" value="super"></button></span>
        <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
        <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
        <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
        <span class="ql-formats"><button type="button" class="ql-link"></button></span>
        <span class="ql-formats">
        <button type="button" @click="imgClick" style="outline:none">
        <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle
          class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill"
                                                                  points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
        </button>
      </span>
        <span class="ql-formats"><button type="button" class="ql-video"></button></span>
      </div>
    </quilleditor>
  </div>
</template>
<script>
  import 'quill/dist/'
  import 'quill/dist/'
  import 'quill/dist/'

  import {quillEditor} from 'vue-quill-editor'

  export default {
    name: "v-editor",
    props: {
      value: {
        type: String
      },
      /*上传图片的地址*/
      uploadUrl: {
        type: String,
        default: '/'
      },
      /*上传图片的file控件name*/
      fileName: {
        type: String,
        default: 'file'
      },
      maxUploadSize:{
        type:Number,
        default: 1024 * 1024 * 500
      }
    },
    data() {
      return {
        content: '',
        editorOption: {
          modules: {
            toolbar: '#toolbar'
          }
        },
      }
    },
    methods: {
      onChange() {
        this.$emit('input', )
      },
      /*选择上传图片切换*/
      onFileChange(e) {
        var fileInput = ;
        if ( === 0) {
          return
        }
        ();
        if ([0].size > ) {
          this.$alert('图片不能大于500KB', '图片尺寸过大', {
            confirmButtonText: '确定',
            type: 'warning',
          })
        }
        var data = new FormData;
        (, [0]);
        this.$(, data)
          .then(res => {
            if () {
              ();
              (().index, 'image', )
            }
          })
      },
      /*点击上传图片按钮*/
      imgClick() {
        if (!) {
          ('no editor uploadUrl');
          return;
        }
        /*内存创建input file*/
        var input = ('input');
         = 'file';
         = ;
         = 'image/jpeg,image/png,image/jpg,image/gif';
         = ;
        ()
      }
    },
    computed: {
      editor() {
        return this.$
      }
    },
    components: {
      'quilleditor': quillEditor
    },
    mounted() {
       = 
    },
    watch: {
      'value'(newVal, oldVal) {
        if () {
          if (newVal !== ) {
             = newVal
          }
        }
      },
    }
  }

</script>

初始编辑器：

修改后的编辑器：

去除一些多余的功能，实现图片上传到服务器主要是以下代码：

      /*选择上传图片切换*/
      onFileChange(e) {
        var fileInput = ;
        if ( === 0) {
          return
        }
        ();
        if ([0].size > ) {
          this.$alert('图片不能大于500KB', '图片尺寸过大', {
            confirmButtonText: '确定',
            type: 'warning',
          })
        }
        var data = new FormData;
        (, [0]);
        this.$(, data)
          .then(res => {
            if () {
              ();
              (().index, 'image', )
            }
          })
      },
      /*点击上传图片按钮*/
      imgClick() {
        if (!) {
          ('no editor uploadUrl');
          return;
        }
        /*内存创建input file*/
        var input = ('input');
         = 'file';
         = ;
         = 'image/jpeg,image/png,image/jpg,image/gif';
         = ;
        ()
      }

点击上传图片按钮后，先调用imgClick方法，当内容改变时调用onFileChange方法，将图片上传到服务器。服务器路径存放在中，通过调用组件时传入。组件调用：

<v-editor  v-model="text" upload-url="/upload/image" fileName="file"/>

属性说明：

属性名	说明	数据类型	默认值
value	编辑器的输出结果，可以用v-model双向绑定	String	无
upload-url	上传按钮对应的图片上传地址，以项目全局的url配置为前缀	String	无
file-name	上传文件的参数名	String	file
maxUploadSize	上传文件的大小限制，单位byte	Number	500kb

备注：

默认支持的图片类型：jpg/png/jpeg/gif

测试结果：

后台数据库：