vue-quill-editor关于文字图片混合编辑上传

写在前面：
各位朋友们，看下面的干货之前，我要给各位朋友一个中肯的建议：
当各位在网上百度或者csdn上搜索各种技术贴或者解决方案的时候，专注于理解对方的思路是最重要的千万不要c+v，因为有时候有可能插件或者软件更新，造成的函数或者属性变更，就会导致在你那里就运行不起来！所以还是要理解对方的思路才是最重要；

这就是我本次vue-quill-editor文字图片混合编辑的踩坑经历
非常遗憾的告诉各位，你们在网上搜索的所有关于此处（vue-quill-editor关于文字图片混合编辑上传）的技术贴99%都是对的，但就是那1%的差别，就导致各位的功能无法实现

具体的实现参照此处
https://blog.youkuaiyun.com/qq_27828675/article/details/80981171?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

https://github.com/NextBoy/skill/issues/2

https://blog.youkuaiyun.com/senmage/article/details/82388728

https://www.jianshu.com/p/21dab85b7fa8

大同小异，仅供各位参考下
我只讲下那1%的差别

<script>
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction
    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['link', 'image'],
    ['clean']
 
  ]
  export default {
    data() {
      return {
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        content: null,
        editorOption: {
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        serverUrl: '/manager/common/imgUpload',  // 这里写你要上传的图片服务器地址
        header: {
          // token: sessionStorage.token
        } // 有的图片服务器要求请求头需要有token
      }
    },
    methods: {
      onEditorChange({editor, html, text}) {//内容改变事件
        console.log("---内容改变事件---")
        this.content = html
        console.log(html)
      },
      // 富文本图片上传前
      beforeUpload() {
        // 显示loading动画
        this.quillUpdateImg = true
      },
 
      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        console.log(res);
        //let quill = this.$refs.myQuillEditor.quill  这是错误的写法（有可能是版本变更造成），获				得的就是underfind
        let quill = this.$refs.myQuillEditor[0].quill; //这个才是正确的，不需要什么写在button里
        // 如果上传成功
        if (res.code == 200 ) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, 'image', res.url)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdateImg = false
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      }
    }
  }

这就是那个1%的差别，你按照上边的写法获得的永远都是underfind,后面的流程怎么都报错，只有按照正确的写法获得quill实例，后面的才跑的通；

写这个文章，就是想后面的，想解决这个问题的朋友少采坑，网上的坑实在太多，太浪费精力了，而且关于解决这个错误的文章一篇都没有，所以写一下，希望能帮到各位！谢谢！