踩坑多次之后终于找到一个完美的解决方法

//富文本编译器完整代码
<template>
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @change="onEditorChange($event,content,500)"
    />
  </div>
</template>

<script>
import {
    
     quillEditor, Quill } from "vue-quill-editor";
import {
    
     container, ImageExtend, QuillWatch } from "quill-image-extend-module";

Quill.register("modules/ImageExtend", ImageExtend);
export default {
    
    
  data() {
    
    
    return {
    
    
      setTime:null,
      content: '',
      editorOption: {
    
    
        // Some Quill options...
        modules: {
    
    
          ImageExtend: {
    
    
            loading: true,
            name: "good_pic",
            action: "http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic",
            headers: (xhr) => {
    
    
              xhr.setRequestHeader(
                "X-Nideshop-Token",
                localStorage.getItem("token")
              );
            }, // change: (xhr, formData) => {},这里也可以触发
            response: (res) => {
    
    
              // console.log(res);
              return res.data.fileUrl;
            },
          },
          toolbar: {
    
    
            container: container,
            handlers: {
    
    
              image: function () {
    
    
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },
    };
  },
  methods: {
    
    
    onEditorChange({
    
     quill, html, text }) {
    
    
      // console.log("editor change!", quill, html, text);
      this.content = html;
      this.$store.commit("quilledit", this.content);
    },
  },
  created(){
    
    
    this.setTime=setInterval(()=>{
    
    
      this.content=this.$store.state.QuillEdit
    },100)
  },
  destroyed(){
    
    
    clearTimeout(this.setTime)
  }
};
</script>

<style>
</style>

首先 安装vue-quill-editor和quill-image-extend-module

然后在main.js文件配置如下代码

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)

另外建议新建一个文件，这里我建的是MyQuill.vue文件
以后要用复制粘贴就完事了

<template>
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @change="onEditorChange($event,content,500)"
    />
  </div>
</template>

<script>
import {
    
     quillEditor, Quill } from "vue-quill-editor";
import {
    
     container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

export default {
    
    
  data() {
    
    
    return {
    
    
      setTime:null,//
      content: '',//这是文本内容
      editorOption: {
    
    
        // Some Quill options...
        modules: {
    
    
          ImageExtend: {
    
    
            loading: true,
            name: "上传图片的参数名",
            action: "上传图片的接口路径",
            headers: (xhr) => {
    
    
              xhr.setRequestHeader(//设置请求头，看需求
                "X-Nideshop-Token",
                localStorage.getItem("token")
              );
            }, // change: (xhr, formData) => {},这里也可以触发
            response: (res) => {
    
    
                //
                上传成功的回调函数
              // console.log(res);
              return res.data.fileUrl;
            },
          },
            //加载工具栏
          toolbar: {
    
    
            container: container,
            handlers: {
    
    
              image: function () {
    
    
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },
    };
  },

然后再写方法将请求回来的数据保存到content,完美

methods: {
    
    
    
    onEditorChange({
    
     quill, html, text }) {
    
    
      // console.log("editor change!", quill, html, text);
      this.content = html;//获取到内容赋值给content显示
        
        //我这里因为在其他组件需要用到数据所以上传到vuex上
      this.$store.commit("quilledit", this.content);
    },
  },
};

这样就可以在上面书写文字,上传图片了,而且都是字符串的形式,转码好了的。保存起来以后要是还需要用到复制粘贴就完事了，我做项目搞这个就坑了一天了