Vue 富文本编辑器 vue-quill-editor

背景

公司项目需要支持简单表格展示、图片上传、样式丰富的富文本编辑器。

当时选择Quill这个富文本编辑器了也是看了一些附带的插件的Demo（quill-better-table、quill-image-resize-module），还有自定义的toolbar

安装

# use npm 

  npm install vue-quill-editor --save
  
  npm install quill --save          

引用

全局引用

main.js中引用

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

//挂载到Vue上
Vue.use(VueQuillEditor, /* { default global options } */)

项目中使用Quill

<quill-editor
    class="editor"
    v-model="content"
    ref="myQuillEditor"