vue 如何引入富文本插件vue-quill-editor

官网链接:

https://github.com/surmon-china/vue-quill-editor

官网有点长，我总结了一下我实现的关键步骤

1 安装依赖包

npm install vue-quill-editor --save
           

2 注册组件

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

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

export default {
  components: {
    quillEditor
  }
}
           

3 模板内容

<template>

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


</template>
           

4 数据部分

export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // Some Quill options...
        }
      }
    },


 
           

5 效果图：