安装

npm install vue-quill-editor --save

该插件是依赖于Quill的，但是无需再下载Quill,因为在安装vue-quill-editor时，已经安装了Quill

引入

在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.use(VueQuillEditor);

在使用该插件的组件中引入

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
  }
}

刚开始看到全局引用和局部引用方式还不一样，一个是import直接引入，一个是加{}引入，后来又在百度找其他文章，发现也是两种都有用，于是去看了下源码，所以两种方法都可以。

import _Quill from 'quill'
import quillEditor from './editor.vue'

const Quill = window.Quill || _Quill
const install = (Vue, globalOptions) => {
  if (globalOptions) {
    quillEditor.props.globalOptions.default = () => globalOptions
  }
  Vue.component(quillEditor.name, quillEditor)
}

const VueQuillEditor = { Quill, quillEditor, install }

export default VueQuillEditor
export { Quill, quillEditor, install }

使用

<quill-editor 
    v-model="editorhtml" 
    ref="myQuillEditor" 
    :options="editorOption">
</quill-editor>

data(){
    return{
        editorHtml:'',
        editorOption:{}
    }
}

editHtml是富文本的内容
editorOption是关于插件的配置，具体请查看文档

链接: https://www.fly63.com/nav/3178