基于vue的富文本编辑器Vue-Quill-Editor

因为项目需要，需要添加富文本编辑器，特意查询下，目前网上有很多富文本编辑器，UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tinymce等，这么多让人有点不知所措。看大家对vue-quill-editor口碑还可以，就特意试试。

vue-quill-editor相关地址：
https://github.com/surmon-china/vue-quill-editor
https://github.surmon.me/vue-quill-editor/
vue-quill-editor个性化配置参考此文档
https://quilljs.com/docs/configuration/

1. vue-quill-editor安装

npm install vue-quill-editor --save

2. 导入 vue-quill-editor
   在main.js中将vue-quill-editor 引入项目

import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)
/*default global options 此处是默认的配置，
可以参考此https://quilljs.com/docs/configuration/做个性化配置,
例如换成这个Vue.use(VueQuillEditor, {
  theme: 'bubble' 
});*/

3.使用 vue-quill-editor
在相关组件中使用

运行后，大致效果是这样：

image.png