富文本编辑器自动聚焦问题 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
}
},
}