vue-quill-editor readOnly不生效

问题描述

老项目用的vue-quill-editor文本编辑器插件（3.0.6版本），需要展示只读状态，去网上查找资料，配置readOnly:true,但是不生效

    <quill-editor 
      v-model="formItem.product_remark" 
      ref="myQuillEditor", 
      :options="editorOption" 
      @ready="onEditorReady($event)" >
    </quill-editor>

    editorOption: {
        placeholder: "",
        theme: "snow", 
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            readOnly: true,
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector(".avatar-uploader input").click();
                  //                            alert('11')
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      }

如上配置 readOnly:true 但是并不生效

解决方案

1. 方案一：给㢟绑定disabled属性，通过改变disabled的值更改编辑器状态（亲测可用）

    <quill-editor 
      v-model="formItem.product_remark" 
      ref="myQuillEditor", 
      :disabled="true"
      :options="editorOption" 
      @ready="onEditorReady($event)" >
    </quill-editor>

2. 方案二：更换vue-quill-editor的版本为3.0.4

参考链接

github.com/surmon-chin…