Vue在ElementUI下使⽤富⽂本框插件quill-editor（我
个⼈不推荐⽤这个复。。。
cnpm install vue-quill-editor优秀的富文本编辑器
cnpm install quill-image-drop-module
cnpm install quill-image-resize-module
执⾏上⾯的命令安装，然后在main.js下⾯加⼊
//引⼊quill-editor编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/ss'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
//实现quill-editor编辑器拖拽上传图⽚
import * as Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module' ister('modules/imageDrop', ImageDrop)
//实现quill-editor编辑器调整图⽚尺⼨
import ImageResize from 'quill-image-resize-module' ister('modules/imageResize', ImageResize)
在vue页⾯中使⽤quill-editor
<template>
<div class="quillEditor">
<quill-editor
v-model="quillEidtorValue"
ref="quillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
></quill-editor>
<button @click="saveQuillEditorValue">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
quillEidtorValue: `<p>hello quillEditor!!</p>`, //默认富⽂本内容      editorOption: {
modules: { imageDrop: true }, //开启拖拽
imageResize: {}, //图⽚⼤⼩可调
theme: "snow" //默认主题
}
};
},
computed: {
editor() {
return this.$refs.quillEditor.quill;
}
},
methods: {
onEditorReady(editor) {}, // 准备编辑器
onEditorBlur() {}, // 失去焦点事件
onEditorFocus(val, editor) {
// console.log(val); // 富⽂本获得焦点时的内容
// able(false); // 在获取焦点的时候禁⽤
}, // 获得焦点事件
onEditorChange() {}, // 内容改变事件
saveQuillEditorValue: function(event) {
alert(this.quillEidtorValue);
}
}
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。