vue-quill-editor 富文本编辑器启用/禁用切换

2,142 阅读1分钟

头文字d.jfif

记录一下工作中遇到的问题。

后台富文本用的是vue-quill-editor,其中表格中有一个回复/查看按钮,共用一个表单组件,但查看时,禁用富文本,回复启用富文本。网上查了下都是禁用富文本,但是禁用过后启用不了,因此做了一些改动, 以下为改动内容。

<quill-editor
      class="editor"
      :content="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @ready="onEditorReady($event)"
    >
    </quill-editor>
    
  props: {
    // 是否可以编辑
    isDisable: {
      type: Boolean,
      default: false,
    },
  },
   methods: {
    // 富文本准备时的事件
    onEditorReady(event) {
      this.event = event;
    },
    },
   watch: {
    isDisable: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.$nextTick(() => {
            this.event.enable(true);
          });
        } else {
          this.$nextTick(() => {
            this.event.enable(false);
          });
        }
      },
      //页面初始化时立即执行
      immediate: true,
    },
  },