Vue-quill-editor is a rich text editor that we often use when we re-use the Vue framework. When we edit rich text, we often insert some pictures. The default way of vue-quill-editor is to convert pictures directly to base64 encoding. As a result, html fragments of rich text are very redundant. Usually, each server receives them. The data size of post s is limited, which may lead to a failure of submission or a poor user experience. It takes a long time for the data to be transmitted to the server.
1. Download Vue-Quill-Editor

   npm install vue-quill-editor --save

2. Download quill (Vue-Quill-Editor needs to depend)

    npm install quill --save

3. use

import { quillEditor } from "vue-quill-editor"; //Call the Editor
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

<template>
  <div>
    <el-upload            //Just hide it directly, use function without style.
      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">Upload only jpg/png Documents, not exceeding 500 kb</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'],                              //The parent component passes in, rendering the passed in to the rich text editor
  data(){
    return{
      uillUpdateImg:false,                        //Determine whether loading animation is displayed based on the status of image upload
      serverUrl:'',  //Uploaded Image Server Address
      value:this.content,                         //Rich text content
      editorOption: {                             //Configuration of character text editor
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [                          // Toolbar configuration, default is all
              ['bold'],
              ['italic'],
              ['underline'],
              ['strike'],
              [{'list':'ordered'},{'list': 'bullet' }],
              ['blockquote'], ['code-block'],
              ['link'],
              ['image'],
              [{'list': 'ordered'}, {'list': 'bullet'}],
            ],
            handlers: {
              'image': function (value) {
                if (value) {
                  // Give a click to trigger Element-ui and select the image file in the input box
                  document.querySelector('#quill-upload input').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      }
    }
  },
  methods:{
    onEditorChange({ quill, html, text }) {      //When rich text editor content changes
      this.value = html
      this.$emit('textChange',html)              //Send the text entered by the rich text editor to the parent component, which involves submitting additions or changes
    },
    beforeUpload(){                              //Open loading before uploading pictures
      this.uillUpdateImg = true
    },
    uploadError(){                              //Image upload failed, close loading
      this.uillUpdateImg = false
      this.$message.error('Picture insertion failed')
    },
    handleExceed(response, file, fileList){     //Picture Added Successfully
      let quill = this.$refs.myQuillEditor.quill
      console.log(response)
      if (response.status === 0) {
        let length = quill.getSelection().index;
        // Insert the image response.data.url to return the image address to the server
        quill.insertEmbed(length, 'image', response.data.url)
        // Adjust the cursor to the end
        quill.setSelection(length + 1)
      }else{
        this.$message.error('Picture insertion failed')
      }
      this.fileList = fileList
      this.uillUpdateImg = false
    },
  }
}
</script>

<style scoped>

</style>

The handlers in the configuration are used to define custom programs, but when we configure them, we will find that the buttons such as image upload in the toolbar of the rich text editor are missing and only a few basic rich text functions are retained.

This is because adding a custom handler overrides the default toolbar and theme behavior
So we have to configure the toolbar we need. The configuration of all the functions is as follows. You can configure them on demand. It looks like a lot of them. It's not beautiful. You can also configure a single config file to import them.