Laravel 8 Livewire中Trix编辑器失焦后工具栏消失如何解决？

问题根源 #

你仅对<trix-editor>标签添加了wire:ignore规则，但Trix编辑器初始化时会自动在编辑器节点前插入工具栏DOM元素，这些自动生成的元素属于外层容器的子节点，没有被wire:ignore覆盖。当你触发trix-blur事件更新$value公共属性时，Livewire会执行组件重渲染，DOM比对阶段会将Trix生成的工具栏判定为非模板定义的冗余元素直接删除，而Trix仅会在首次初始化时生成工具栏，后续不会重新渲染，因此出现工具栏永久消失的问题。

修复步骤 #

1. 修改Trix组件视图 #

将外层容器整体添加wire:ignore，阻止Livewire修改Trix相关的所有DOM，同时调整事件绑定逻辑避免冲突，修改后代码如下：

<div wire:ignore>
    <input id="{{ $trixId }}" type="hidden" name="content" value="{{ $value }}">
    <trix-editor class="text-white" input="{{ $trixId }}"></trix-editor>
</div>
<script>
document.addEventListener('trix-initialize', function() {
    // 绑定当前实例的编辑器事件，避免全局绑定冲突
    const trixEditor = document.querySelector('trix-editor[input="{{ $trixId }}"]');
    trixEditor.addEventListener('trix-blur', function(event) {
        // 第三个参数传false，禁止更新属性后立刻触发组件重渲染
        @this.set('value', trixEditor.value, false);
    })
})
</script>

2. 可选：支持内容同步 #

如果后续需要从父组件动态更新Trix编辑器的内容，不要直接修改传入的value属性触发重渲染，可通过浏览器事件同步内容：
首先修改Trix组件类，添加事件监听：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Trix extends Component
{
    public $value;
    public $trixId;
    const EVENT_VALUE_UPDATED = 'trix_value_updated';
    // 新增监听内容更新事件
    protected $listeners = ['updateTrixContent' => 'syncContent'];

    public function mount($value = ''){
        $this->value = $value;
        $this->trixId = 'trix-' . uniqid();
    }

    public function render()
    {
        return view('livewire.trix');
    }

    public function updatedValue($value){
        $this->emit(self::EVENT_VALUE_UPDATED, $this->value);
    }

    // 新增同步内容方法
    public function syncContent($newContent)
    {
        $this->value = $newContent;
        $this->dispatchBrowserEvent('trix_sync_' . $this->trixId, ['content' => $newContent]);
    }
}

然后在Trix视图的script标签中添加内容同步逻辑：

window.addEventListener('trix_sync_{{ $trixId }}', function(e) {
    const trixEditor = document.querySelector('trix-editor[input="{{ $trixId }}"]');
    trixEditor.editor.loadHTML(e.detail.content);
})

需要更新内容时，父组件调用$this->emit('updateTrixContent', $新内容)即可。

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