1、安裝依賴
npm install vue-quill-editor --save
npm install quill --save
2、內(nèi)容
<template>
? ? <div class="edit_container">
? ? ? ? <quill-editor
? ? ? ? ? ? v-model="content"
? ? ? ? ? ? ref="myQuillEditor"
? ? ? ? ? ? :options="editorOption"
? ? ? ? ? ? @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
? ? ? ? ? ? @change="onEditorChange($event)">
? ? ? ? </quill-editor>
? ? </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //調(diào)用編輯器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
? ? components: {
? ? ? ? quillEditor
? ? },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
? ? ? ? ? ? editorOption: {}
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? onEditorReady(editor) { // 準(zhǔn)備編輯器
? ? ? ? },
? ? ? ? onEditorBlur(){}, // 失去焦點事件
? ? ? ? onEditorFocus(){}, // 獲得焦點事件
? ? ? ? onEditorChange(){}, // 內(nèi)容改變事件
? ? },
? ? computed: {
? ? ? ? editor() {
? ? ? ? ? ? return this.$refs.myQuillEditor.quill;
? ? ? ? },
? ? }
}
</script>
