?

?

?

cnpm install vue-quill-editor
cnpm install quill-image-drop-module
cnpm install quill-image-resize-module

執(zhí)行上面的命令安裝，然后在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)//實現(xiàn)quill-editor編輯器拖拽上傳圖片import * as Quill from 'quill'import { ImageDrop } from 'quill-image-drop-module'Quill.register('modules/imageDrop', ImageDrop)//實現(xiàn)quill-editor編輯器調整圖片尺寸import ImageResize from 'quill-image-resize-module'Quill.register('modules/imageResize', ImageResize)

在vue頁面中使用quill-editor

<template><div class="quillEditor"><quill-editorv-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>

? ?

總結

以上是生活随笔為你收集整理的Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。