【避坑指南】vue3使用富文本编辑器vueQuillEditor

网上看了很多篇文章，照抄之后发现都有各种各样的问题，还是得自己看了源码之后才知道正确的使用方法

第一步安装

npm install @vueup/vue-quill@alpha --save

第二步引入

在main.js中引入

import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const app = createApp()
app.component('QuillEditor', QuillEditor)

或者在需要的模块中引入

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
  components: {
    QuillEditor
  }
}

第三步使用（坑开始出现了！）

配置项随便写一下就行了

editorOption: {
     modules: {
         toolbar: [
             ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
             ['blockquote', 'code-block'], //引用，代码块
             [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
             [{ list: 'ordered' }, { list: 'bullet' }], //列表
             [{ script: 'sub' }, { script: 'super' }], // 上下标
             [{ indent: '-1' }, { indent: '+1' }], // 缩进
             [{ direction: 'rtl' }], // 文本方向
             [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
             [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
             [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
             [{ font: [] }], //字体
             [{ align: [] }], //对齐方式
             // ['clean'], //清除字体样式
             // ['image'], //上传图片、上传视频 ['image', 'video']
         ]
     },
     placeholder: '请输入内容...'
 }

重点在这里！

错误的使用方法：

<QuillEditor ref="myQuillEditor" 
	theme="snow" 
	v-model="content" 
	:options="editorOption" 
    @change="onEditorChange($event)"
/>

这样写， v-model 不会有任何效果，@change也不会有任何效果，组件实际有的事件如下：

emits: [
        'textChange',
        'selectionChange',
        'editorChange',
        'update:content',
        'focus',
        'blur',
        'ready',
    ],

正确的使用 方式

<QuillEditor ref="myQuillEditor" 
          theme="snow" 
               v-model:content="summary" 
               :options="editorOption" 
               contentType="html"
           />

总结：

① v-model 要改成 v-model:content
② @change 要改成 @selectionChange 或 @editorChange
③ 一定要加上 contentType=“html”