如何为vue-quill添加quill-emoji？遇TypeError报错求助

你的代码存在几个关键问题，直接修正以下几点就能解决报错和功能失效问题：

错误原因&修正步骤 #

1. 模块导入方式错误
   quill-emoji导出的是QuillEmoji类，并非整个模块对象，导入时需指定具体类：

import { QuillEmoji } from 'quill-emoji';

2. Modules配置格式错误
   vue-quill的modules应为键值对结构，键是模块名，值是包含module和options的对象，你的配置格式不符合要求，正确写法如下：

const modules = {
  toolbar: toolbarOptions, // 绑定自定义工具栏配置
  emoji: {
    module: QuillEmoji,
    options: {
      "emoji-toolbar": true,
      "emoji-textarea": true,
      "emoji-shortname": true,
    }
  }
}

3. Toolbar配置冲突
   模板中同时设置toolbar="full"和自定义工具栏配置会导致冲突，需移除toolbar="full"，改用绑定的自定义配置：

<QuillEditor 
  :modules="modules" 
  theme="snow" 
  content-type="html" 
  v-model:content="articleData.content" 
/>

4. 多余的Handlers配置
   无需手动编写emoji的handler，quill-emoji模块会自动处理，删掉toolbarOptions里的handlers: {'emoji': function() {}}即可。

完整修正后的代码 #

import { QuillEditor} from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import 'quill-emoji/dist/quill-emoji.css';
import { QuillEmoji } from "quill-emoji";

const toolbarOptions = {
  container: [
    ['bold', 'italic', 'underline', 'strike'],
    ['emoji'],
  ]
}

export default {
  props: ['article'],
  components: { QuillEditor },
  setup: () => {
    const modules = {
      toolbar: toolbarOptions,
      emoji: {
        module: QuillEmoji,
        options: {
          "emoji-toolbar": true,
          "emoji-textarea": true,
          "emoji-shortname": true,
        }
      }
    }

    return { modules }
  },
  data() {
    return {
      articleData: {
        content: this.article?.content || ''
      }
    }
  }
}

<template>
  <QuillEditor 
    :modules="modules" 
    theme="snow" 
    content-type="html" 
    v-model:content="articleData.content" 
  />
</template>

内容的提问来源于stack exchange，提问作者Utkarsh More