Laravel/Livewire项目中Quill RTE无法添加emoji问题求助

我在Laravel/Livewire项目中使用Quill作为富文本编辑器，已通过npm安装quill-emoji，但尝试添加emoji时出现以下错误：

quill.js:2088 quill Cannot import modules/emoji-toolbar. Are you sure it was registered?
quill.js:2088 quill Cannot import modules/emoji-textarea. Are you sure it was registered?
quill.js:2088 quill Cannot import modules/emoji-shortname. Are you sure it was registered?

相关代码如下：

加载Quill的视图文件 #

<div class="w-full"
     wire:ignore
     x-data="{ removeImage: {{ isset($removeImage) ? ($removeImage ? 'true' : 'false') : 'false' }} }"
     x-init="function() {
        $load_script('{{ mix('js/quill.js') }}').then(() => {
            var toolbarOptions = <?php echo config('webbuilder.default-quill-options') ?>;
            if (removeImage) {
                toolbarOptions = toolbarOptions.map(option => {
                    if (Array.isArray(option) && option.includes('image')) {
                        return option.filter(item => item !== 'image');
                    }
                    return option;
                });
            }
            let quill = new Quill('#quill-{{ "article" }}', {
                placeholder: 'Compose message',
                modules: {
                    toolbar: toolbarOptions,
                    'emoji-toolbar': true,
                    'emoji-textarea': true,
                    'emoji-shortname': true,
                },
                theme: 'snow'
            });

            quill.on('text-change', () => {
                let QuillDiv = document.getElementById('quill-{{ "article" }}');
                let hidden   = document.getElementById('hidden-content-{{ "article" }}');

                hidden.value = QuillDiv.children[0].innerHTML;

                hidden.dispatchEvent(new Event('input', {
                    bubbles: true,
                    cancelable: true,
                }))
            });

            let defaultValue = @this.get('article');
            let delta = quill.clipboard.convert(defaultValue);

            quill.setContents(delta, 'silent')
        });
     }"
>
    <input type="hidden"
           wire:model.debounce.500ms="article"
           id="hidden-content-{{ "article" }}">
           
           <div id="quill-{{"article" }}"></div>
           <div class="my-2">
            <label class="text-gray-500">{{ "Note : Add link with prefix Https:// or Http://" }}</label>
           </div>
         

</div>

加载的quill.js文件内容 #

window.Quill = require('../../node_modules/quill/dist/quill.min');

Quill工具栏配置项 #

'default-quill-options' => "[
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'align': [] }],
    ['link', 'image'],
    ['emoji']
]"

报错核心是你仅安装了quill-emoji，但未在Quill中注册对应的emoji模块，导致Quill无法识别这些模块。

1. 修改quill.js，导入并注册emoji模块 #

将原quill.js内容替换为：

// 导入Quill核心
window.Quill = require('quill/dist/quill.min');
// 导入quill-emoji的各个模块
const EmojiToolbar = require('quill-emoji/dist/toolbar-emoji');
const EmojiTextarea = require('quill-emoji/dist/textarea-emoji');
const EmojiShortname = require('quill-emoji/dist/shortname-emoji');

// 注册模块到Quill
Quill.register({
  'modules/emoji-toolbar': EmojiToolbar,
  'modules/emoji-textarea': EmojiTextarea,
  'modules/emoji-shortname': EmojiShortname
}, true);

如果项目使用ES模块语法，可改为：

import Quill from 'quill/dist/quill.min';
import EmojiToolbar from 'quill-emoji/dist/toolbar-emoji';
import EmojiTextarea from 'quill-emoji/dist/textarea-emoji';
import EmojiShortname from 'quill-emoji/dist/shortname-emoji';

Quill.register({
  'modules/emoji-toolbar': EmojiToolbar,
  'modules/emoji-textarea': EmojiTextarea,
  'modules/emoji-shortname': EmojiShortname
}, true);

window.Quill = Quill;

2. 引入quill-emoji样式 #

在项目CSS入口文件（如app.css）中添加：

@import 'quill-emoji/dist/quill-emoji.css';

或直接在视图中引入CDN样式：

<link href="https://cdn.jsdelivr.net/npm/quill-emoji@0.2.0/dist/quill-emoji.css" rel="stylesheet">

3. 重新编译前端资源 #

运行Laravel Mix编译命令：

npm run dev
# 生产环境使用
npm run prod

额外检查 #

• 确认quill-emoji版本与Quill版本兼容，可查看quill-emoji文档匹配对应版本；
• 工具栏配置中的['emoji']项无需修改，模块注册成功后即可正常显示按钮。

内容的提问来源于stack exchange，提问作者Usama Arslan