vue使用富文本编辑器

vue-富文本编辑器

Vue-Quill-Editor使用

官网文档，可以参照文档进行使用/liuwave/quill/1434140

简单的使用：

首先安装依赖：

npm install vue-quill-editor --save

然后可以在全局挂载或者在单页面挂载

单页面挂载示例：

import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'// require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor, /* { default global options } */)import { quillEditor } from 'vue-quill-editor'export default {components: {quillEditor}}

在vue页面引入组件：

<quill-editor v-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"@change="onEditorChange($event)"style="height: 400px;width: 1200px;margin-top: 30px"></quill-editor>

js方法：

export default {data () {return {content: '<h2>I am Example</h2>',editorOption: {// some quill options}}},// manually control the data synchronization// 如果需要手动控制数据同步，父组件需要显式地处理changed事件methods: {onEditorBlur(quill) {console.log('editor blur!', quill)},onEditorFocus(quill) {console.log('editor focus!', quill)},onEditorReady(quill) {console.log('editor ready!', quill)},onEditorChange({ quill, html, text }) {console.log('editor change!', quill, html, text)this.content = html}},computed: {editor() {return this.$refs.myQuillEditor.quill}},mounted() {console.log('this is current quill instance object', this.editor)}}

然后就可以使用了，具体每个触发事件可以自己多点点尝试尝试就知道什么作用了。