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/dist/quill.core.css' 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' Quill.register('modules/imageDrop', ImageDrop) //实现quill-editor编辑器调整图片尺寸 import ImageResize from 'quill-image-resize-module' Quill.register('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); // 富文本获得焦点时的内容 // editor.enable(false); // 在获取焦点的时候禁用 }, // 获得焦点事件 onEditorChange() {}, // 内容改变事件 saveQuillEditorValue: function(event) { alert(this.quillEidtorValue); } } }; </script>