Vue项目中quill-editor带样式编辑器的使用方法

// 编辑器光标离开 将编辑器内容发射给父组件
onEditorBlur(editor) {
this.$emit('getValue', this.content)
}

// 编辑器获得光标
onEditorFocus(editor) {
editor.enable(true) // 实现达到上限字符可删除
}

// 编辑器文本发生变化
onEditorChange({ editor, html, text }) {
let textLength = text.length
if (textLength > 10000) {
(<any>this).$message.error('最多输入10000个字符')
editor.enable(false)
}
this.$emit('getValue', this.content)
}

// 清除编辑器内容
callMethod() {
this.content = ''
}

// 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
mounted() {
// 为图片ICON绑定事件 getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
}
}

相关参考链接：

vue-quill-editor实现图片上传功能

vue-quill-editor API文档地址

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。