Livewire 3升级后Tiptap编辑器报Alpine表达式错误：e未定义

数据老陈

2026-7-8

Livewire 3 升级后 Tiptap 媒体插入报错「e未定义」的解决方案

问题根源在于Livewire 3对全局事件的参数传递机制做了调整：Livewire 2中直接传递的事件参数，在Livewire 3里会被包裹在event.detail对象中，而你在Blade的事件绑定里仍沿用了旧的参数获取方式，导致Alpine无法找到e变量。

修复步骤：

修改Blade模板的事件绑定
将原来的事件调用从依赖e改为从$event.detail读取参数：

<!-- 错误写法 -->
<div x-data="{ editor: null }" x-on:tiptap-insert-media.window="insertMedia(e)">

<!-- 正确写法 -->
<div x-data="{ editor: null }" x-on:tiptap-insert-media.window="insertMedia($event.detail)">

确认Livewire组件的事件派发格式
确保Livewire组件中使用Livewire 3的标准全局事件派发语法，参数以数组形式传递：

// Article组件中的派发代码
$this->dispatch('tiptap-insert-media', [
    'url' => $media->url,
    'alt' => $media->alt,
]);

适配Tiptap的insertMedia方法
确保insertMedia方法能正确解析从$event.detail传递过来的参数对象：

// tiptap.js中的处理方法
function insertMedia(media) {
    if (!window.editor) return;

    window.editor.chain()
        .focus()
        .insertImage({
            src: media.url,
            alt: media.alt || '媒体图片'
        })
        .run();
}