vue-quill-editor富文本框增加表情包quill-emoji

引入并注册

import { Quill, quillEditor } from 'vue-quill-editor'
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

Quill.register('modules/quillEmoji', quillEmoji)

上面组件得install
npm i node-emoji

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {
        theme: 'snow',
        modules: {
          'emoji-toolbar': true,
          'emoji-shortname': true,
          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'], // 图片
            ['emoji'],//表情包
            // ['link', 'image', 'video'], // 链接、图片、视频
          ], // 工具菜单栏配置
        },
        placeholder: '输入评论...', // 提示
      },
    }
   }
 }

<quill-editor
	ref="myQuillEditor"
	v-model="replyForm.replyContent"
	 class="quill"
	 :options="editorOption"
	/>