Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor

1、安装

npm install vue-quill-editor --save

2、使用

import { quillEditor } from 'vue-quill-editor'

3、组件中

<quill-editor v-model="content"ref="myQuillEditor"class="editer":options="editorOption"@ready="onEditorReady($event)"></quill-editor>

data(){return {content: '<h3>文本编辑</h3>',editorOption: {}}},components: {NavHeader,quillEditor,},computed: {editor() {return this.$refs.myQuillEditor.quill}},methods: {onEditorReady(editor) {console.log('editor ready!', editor)},submit(){console.log(this.content);this.$message.success('提交成功！');}}

这样就已经完成了，但是有的时候在页面中 这样之后，样式会全部乱掉解决办法

main.js 中

import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import VueQuillEditor from 'vue-quill-editor'Vue.use(VueQuillEditor);