富文本编辑器自动聚焦问题 quill

聚焦会导致组件在使用时,改变页面本身滚动高度位置。这往往不是我们想要看到的。
解决方案:

mounted() {
    this.init();
},
beforeDestroy() {
    this.Quill = null;
},
methods: {
    init() {
        const editor = this.$refs.editor;
        this.Quill = new Quill(editor, this.options);

        // 取消自动聚焦 开始
        this.Quill.enable(false);
        this.$nextTick(()=>{
            this.Quill.enable(true);
            this.Quill.blur();
        });
        // 取消自动聚焦 结束
    }
}


一、初始化时令vue-quill-editor失效

mounted() {
    this.$refs.myQuillEditor.quill.enable(false)
},

二、点击富文本框时令quill-editor生效,并聚焦

<quill-editor 
      class="editor"
      :class="isFocus ? 'focus-margin' : ''"
      v-model="messages"
      ref="myQuillEditor"
      @click.native="handleEditAble"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @ready="onEditorReady">
    </quill-editor>
    
methods: {
    handleEditAble() {
      if(this.qillInit) {
        this.$refs.myQuillEditor.quill.enable(true)
        this.$refs.myQuillEditor.quill.focus()
        this.qillInit = false
      }
    },
}