Vue项目中使用quill富文本编辑器

最近新起了一个项目,弃用之前的UE富文本编辑器,通过调研决定使用quill,一个很简单的小插件哈,以下是我的使用经验

1. 安装

npm install vue-quill-edito

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 {
  name: 'quillEditorDemo',
  components: {
    quillEditor: quillEditor,
  },

3. 使用

<quill-editor
  id="myQuillEditor"
  ref="myQuillEditor"
  v-model="optNote.content.html"
  :options="editorOption"
  class="my-quill-editor"
  @focus="onEditorFocus"
  @change="onEditorChange($event)" />

.......
//富文本编辑器的配置项 optNote与editorOption
data(){
    optNote: {
        visible: false,
        title