image.png

问题

编辑器在一个页面使用多个富文本框上传图片时报 

  1. TypeError: Cannot read property ‘index‘ of null

问题原因

在上传图片成功方法中，代码是这样子的：

  1. quillImgSuccess(res, file) {
  2.       console.log(res);
  3.       console.log(file);
  4.       // res为图片服务器返回的数据
  5.       // 获取富文本组件实例
  6.       let quill = this.$refs.quillEditor.quill;
  7.       // 如果上传成功
  8.       if (res.code == 200) {
  9.         // 获取光标所在位置
  10.         let length = quill.getSelection().index;
  11.         // 插入图片  res.url为服务器返回的图片地址
  12.         console.log(res)
  13.         quill.insertEmbed(length, "image", risun.util.nginxServerUrl()+res.fileName);
  14.         // 调整光标到最后
  15.         quill.setSelection(length + 1);
  16.       } else {
  17.         this.$message.error("图片插入失败");
  18.       }
  19.     },
  20.     // 富文本图片上传失败
  21.     uploadError() {
  22.       // loading动画消失
  23.       this.$message.error("图片插入失败");
  24.     }

其中的这一句：

  1. // 获取光标所在位置
  2.         let length = quill.getSelection().index;

会报这个错误。究其原因，其实是

  1. <quill-editor
  2.       class="editor"
  3.       v-model="content"
  4.       ref="quillEditor"
  5.       :options="editorOption"
  6.       @blur="onEditorBlur($event)"
  7.       @focus="onEditorFocus($event)"
  8.       @change="onEditorChange($event)"
  9.     ></quill-editor>

中的

  1. ref="quillEditor"

请注意，这里的 ref 被写死了。在同一个页面使用多个 vue-quill-editor 时，这个上传完成后调用的方法 quillImgSuccess 用 this 获得的对象只能获得第一个富文本框实例！这就是为什么出错的原因！

解决方法

完整代码如下

  1. <template>
  2.   <div>
  3.     <!-- 图片上传组件辅助 -->
  4.     <el-upload
  5.       :key="randomString(3)"
  6.       class="avatar-uploader quill-img"
  7.       :action="uploadImgUrl"
  8.       name="file"
  9.       :headers="headers"
  10.       :show-file-list="false"
  11.       :on-success="quillImgSuccess"
  12.       :on-error="uploadError"
  13.       :before-upload="quillImgBefore"
  14.       accept='.jpg,.jpeg,.png,.gif,.jfif'
  15.     ></el-upload>
  17.     <!-- 富文本组件 -->
  18.     <quill-editor
  19.       class="ql-editor"
  20.       v-model="content"
  21.       :ref="toref"
  22.       :options="editorOption"
  23.       @blur="onEditorBlur($event)"
  24.       @focus="onEditorFocus($event)"
  25.       @change="onEditorChange($event)"
  26.     ></quill-editor>
  27.   </div>
  28. </template>
  30. <script>
  31.   import { getToken } from '@/utils/auth'
  32.   // import { getToken } from "@/api/system/upload.js";
  34.   // 工具栏配置
  35.   const toolbarOptions = [
  36.     ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
  37.     ["blockquote", "code-block"],                    // 引用  代码块
  38.     [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
  39.     [{ indent: "-1" }, { indent: "+1" }],            // 缩进
  40.     [{ size: ["small", false, "large", "huge"] }],   // 字体大小
  41.     [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
  42.     [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
  43.     [{ align: [] }],                                 // 对齐方式
  44.     ["clean"],                                       // 清除文本格式
  45.     ["link", "image", /*"video"*/]                       // 链接、图片、视频
  46.   ];
  48.   import { quillEditor } from "vue-quill-editor";
  49.   import "quill/dist/quill.core.css";
  50.   import "quill/dist/quill.snow.css";
  51.   import "quill/dist/quill.bubble.css";
  53.   export default {
  54.     props: {
  55.       /* 编辑器的内容 */
  56.       value: {
  57.         type: String
  58.       },
  59.       /* 图片大小 */
  60.       maxSize: {
  61.         type: Number,
  62.         default: 4000 //kb
  63.       },
  64.       toref: {
  65.         type: String,
  66.         default:"quillEditor"
  67.       },
  68.       quillIndex:{
  69.         type:Number,
  70.         default:0
  71.       },
  72.     },
  73.     components: { quillEditor },
  74.     data() {
  75.       return {
  76.         content: this.value,
  77.         host: process.env.VUE_APP_BASE_API,
  78.         // reqData: {
  79.         // },
  80.         // dir:"fuwenben",
  81.         editorOption: {
  82.           placeholder: "",
  83.           theme: "snow", // or 'bubble'
  84.           placeholder: "请输入内容",
  85.           modules: {
  86.             toolbar: {
  87.               container: toolbarOptions,
  88.               handlers: {
  89.                 image: (value) => {
  90.                   if (value) {
  91.                     // 触发input框选择图片文件
  92.                     const index = this.quillIndex;
  93.                     document.querySelectorAll(".quill-img input")[index].click();
  94.                   } else {
  95.                     this.quill.format("image", false);
  96.                   }
  97.                 }
  98.               }
  99.             }
  100.           }
  101.         },
  102.         uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
  103.         headers: {
  104.           Authorization: 'Bearer ' + getToken()
  105.         }
  106.       };
  107.     },
  108.     watch: {
  109.       value: function() {
  110.         this.content = this.value;
  111.       }
  112.     },
  113.     created() {
  114.       console.log(this.toref,"## toref")
  115.     },
  116.     methods: {
  117.       onEditorBlur() {
  118.         //失去焦点事件
  119.       },
  120.       onEditorFocus() {
  121.         //获得焦点事件
  122.       },
  123.       onEditorChange() {
  124.         //内容改变事件
  125.         this.$emit("input", this.content);
  126.       },
  127.       randomString(len){
  128.         //默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
  129.         var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  130.         var tempLen = chars.length, tempStr='';
  131.         for(var i=0; i<len; ++i){
  132.           tempStr += chars.charAt(Math.floor(Math.random() * tempLen ));
  133.         }
  134.         return tempStr;
  135.       },
  136.       // 富文本图片上传前
  137.       async quillImgBefore(file) {
  138.         let fileType = file.type;
  139.         if(fileType === 'image/jpeg' || fileType === 'image/png' || fileType === 'image/jpg'){
  140.           return true;
  141.         }else {
  142.           this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
  143.           return false;
  144.         }
  145.       },
  146.       quillImgSuccess(res, file) {
  147.         // res为图片服务器返回的数据
  148.         // 获取富文本组件实例
  149.         // let quill = this.$refs.quillEditor.quill;
  150.         // 获取富文本组件实例
  151.         console.log("this:",this.$refs);
  152.         console.log("toref:",this.toref);
  153.         let toeval = "this.$refs."+this.toref+".quill"
  154.         console.log("toeval",toeval);
  155.         let quill = eval(toeval);
  156.         console.log("quill",quill);
  157.         // 如果上传成功
  158.         // 获取光标所在位置
  159.         // let length = quill.getSelection().index;
  160.         let length = quill.selection.savedRange.index;
  161.         // 插入图片
  162.         quill.insertEmbed(length, "image",this.host + res.key);
  163.         // 调整光标到最后
  164.         quill.setSelection(length + 1);
  165.       },
  166.       // 富文本图片上传失败
  167.       uploadError() {
  168.         // loading动画消失
  169.         this.$message.error("图片插入失败");
  170.       }
  171.     }
  172.   };
  173. </script>
  175. <style>
  176.   .ql-editor {
  177.     line-height: normal !important;
  178.     min-height: 300px;
  179.   }
  180.   .quill-img {
  181.     display: none;
  182.   }
  183.   .ql-snow .ql-tooltip[data-mode="link"]::before {
  184.     content: "请输入链接地址:";
  185.   }
  186.   .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  187.     border-right: 0px;
  188.     content: "保存";
  189.     padding-right: 0px;
  190.   }
  192.   .ql-snow .ql-tooltip[data-mode="video"]::before {
  193.     content: "请输入视频地址:";
  194.   }
  196.   .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  197.   .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  198.     content: "14px";
  199.   }
  200.   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  201.   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  202.     content: "10px";
  203.   }
  204.   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  205.   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  206.     content: "18px";
  207.   }
  208.   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  209.   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  210.     content: "32px";
  211.   }
  213.   .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  214.   .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  215.     content: "文本";
  216.   }
  217.   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  218.   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  219.     content: "标题1";
  220.   }
  221.   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  222.   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  223.     content: "标题2";
  224.   }
  225.   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  226.   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  227.     content: "标题3";
  228.   }
  229.   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  230.   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  231.     content: "标题4";
  232.   }
  233.   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  234.   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  235.     content: "标题5";
  236.   }
  237.   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  238.   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  239.     content: "标题6";
  240.   }
  242.   .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  243.   .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  244.     content: "标准字体";
  245.   }
  246.   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  247.   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  248.     content: "衬线字体";
  249.   }
  250.   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  251.   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  252.     content: "等宽字体";
  253.   }
  254. </style>

如何引用

  1. <el-form-item label="课程介绍" prop="introduce">
  2.   <editor toref="torefIntroduce" :quillIndex="0" v-model="form.introduce" :min-height="192"/>
  3. </el-form-item>
  4. <el-form-item label="试看内容" >
  5.   <editor toref="torefTrySeeContent" :quillIndex="1" v-model="form.trySeeContent" :min-height="192"/>
  6. </el-form-item>
  7. <el-form-item label="内容" >
  8.   <editor toref="torefContent" :quillIndex="2" v-model="form.content" :min-height="192"/>
  9. </el-form-item>

这是在页面引用组件时的代码，js 代码忽略了。
注意一下 quillIndex 的顺序别搞错了，根据索引找到富文本组件

最关键的是这几个地方：
一、在组件里
1. 富文本组件里的 ref 属性：

  1.  :ref="toref"

这里的 toref 是页面传过来的值。

  1. props 中增加：
    1. toref: {
    2.  type: String,
    3.  default:"quillEditor"
    4. },

参考

https://blog.csdn.net/yx111115/article/details/109132660