1.下载
npm install vue-quill-editor --save
cnpm install quill --save
2.引用
<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"; //调用编辑器
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: `欢迎使用`,
editorOption: {}
}
},
methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}, // 内容改变事件
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
}
}
</script>
3.内容查看
将下面方法加入上面的methods->onEditorChange
方法里,编译器输入的内容将会被保存在content
里面,this.$store.state.content = html;
这个会把编译器的内容放在store.js
里面的state
下的content(自己创建)
,就可以在其他.vue的内容里,引用content
里面的内容,
使用this.$store.state.content
引用
onEditorChange({ quill, html, text }) {
console.log("editor change!", quill, html, text);
this.content = html;
this.$store.state.content = html;
},