Filament中通过npm引入QuillJS及图片上传模块替代CDN

1. 安装依赖包 #

首先通过npm安装Quill核心库和图片上传模块：

npm install quill quill-image-uploader

2. 配置资源文件（无app.js时创建） #

如果项目中没有resources/js/app.js，手动创建该文件并写入以下内容：

// 导入Quill核心及样式
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

// 导入图片上传模块及配套样式
import ImageUploader from 'quill-image-uploader';
import 'quill-image-uploader/dist/quill.imageUploader.min.css';

// 注册图片上传模块到Quill
Quill.register('modules/imageUploader', ImageUploader);

// 将Quill挂载到window全局对象，让Alpine.js可以访问
window.Quill = Quill;

Laravel项目（Filament基于Laravel）需确保Vite配置正确（vite.config.js）：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

3. 编译前端资源 #

运行编译命令生成可部署的资源文件：

npm run dev
# 生产环境请使用 npm run build

4. 修改自定义字段视图文件 #

删除原CDN引入代码，修改quill-editor.blade.php如下：

@push('styles')
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ mix('js/app.js') }}"></script>
@endpush

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
        x-init="
            // 初始化Quill编辑器，配置图片上传模块
            const quill = new Quill($refs.editor, {
                theme: 'snow',
                modules: {
                    imageUploader: {
                        // 自定义图片上传逻辑，替换为你的后端上传接口
                        upload: (file) => {
                            return new Promise((resolve, reject) => {
                                const formData = new FormData();
                                formData.append('image', file);

                                fetch('/api/upload-image', {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                    },
                                    body: formData
                                })
                                .then(res => res.json())
                                .then(data => resolve(data.url))
                                .catch(err => reject('图片上传失败'));
                            });
                        }
                    }
                }
            });

            // 同步初始值到编辑器
            if (state) quill.root.innerHTML = state;

            // 编辑器内容变化时同步到Livewire
            quill.on('text-change', () => state = quill.root.innerHTML);

            // 监听Livewire状态变化，同步回编辑器
            $watch('state', (newVal) => {
                if (newVal !== quill.root.innerHTML) {
                    quill.root.innerHTML = newVal;
                }
            });
        "
    >
        <div
            wire:ignore
            x-ref="editor"
            class="min-h-[200px]"
        ></div>
    </div>
</x-dynamic-component>

补充说明 #

• 需确保后端有对应的图片上传接口，负责处理文件存储并返回图片访问URL
• @push('styles')和@push('scripts')会自动将资源注入到Filament布局的对应位置
• 生产环境必须运行npm run build编译优化后的资源文件

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