Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="uploadAction"
      :headers="uploadHeaders"
      :show-file-list="false"
      :on-success="handleImageSuccess"
      :before-upload="beforeUpload">
      <el-button size="small" type="primary">点击上传图片</el-button>
    </el-upload>
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
    <el-button @click="submit">提交</el-button>
  </div>
</template>
 
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { getToken } from '@/utils/auth'
 
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      uploadAction: 'http://example.com/upload', // 上传图片的API地址
      uploadHeaders: { Authorization: 'Bearer ' + getToken() }, // 设置上传图片的请求头
      content: '', // 富文本编辑器的内容
      editorOption: {
        placeholder: '请在这里输入内容...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['image', 'video']
          ]
        }
      }
    }
  },
  methods: {
    // 图片上传前的钩子
    beforeUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
 
      if (!isImage) {
        this.$message.error('只能上传JPG/PNG格式的图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传的图片大小不能超过 2MB!')
      }
      return isImage && isLt2M
    },
    // 图片上传成功的钩子
    handleImageSuccess(res, file) {
      const imgUrl = res.data.url
      this.$refs.myQuillEditor.quill.insertEmbed(this.$refs.myQuillEditor.quill.getSelection().index, 'image', imgUrl)
    },
    // 提交内容
    submit() {
      // 这里可以添加提交内容到服务器的逻辑
      console.log(this.content)
    }
  }
}
</script>

这个代码实例展示了如何在Vue应用中使用Element UI和vue-quill-editor创建一个可以上传图片并插入图片的富文本编辑器。它包括了图片上传的前端逻辑（包括文件类型和大小的校验）以及图片插入到编辑器的操作。同时，它提供了一个简单的提交功能，用于展示如何获取富文本编辑器的内容。