如何将TinyMCE编辑器的动态值传递给Livewire组件？

方案一：触发carga-event时直接传递编辑器内容 #

既然你已经通过外部按钮触发Livewire的carga-event，可以在触发事件前先获取TinyMCE的当前内容，再作为参数传递给事件：

前端JS代码 #

// 替换#trigger-btn为你的实际触发按钮选择器
document.querySelector('#trigger-btn').addEventListener('click', function() {
    // 获取TinyMCE编辑器的当前内容
    const editorContent = tinymce.get('myeditorinstance').getContent();
    // 触发Livewire事件并携带内容参数
    Livewire.dispatch('carga-event', { editorContent: editorContent });
});

Livewire组件代码 #

在组件中接收事件参数并处理：

protected $listeners = ['carga-event' => 'handleCargaEvent'];

public function handleCargaEvent($payload)
{
    // 提取编辑器内容
    $content = $payload['editorContent'];
    // 这里编写你的业务逻辑，比如保存、处理内容等
}

方案二：实时同步编辑器内容到Livewire属性 #

如果需要让Livewire实时获取TinyMCE的内容变化，可以监听编辑器的change事件，实时同步到组件属性：

Livewire组件定义属性 #

public $editorContent = '';

前端TinyMCE初始化代码 #

tinymce.init({
    selector: '#myeditorinstance',
    setup: function(editor) {
        // 监听编辑器内容变化事件
        editor.on('change', function() {
            // 触发自定义Livewire事件传递内容
            Livewire.dispatch('sync-editor-content', { content: editor.getContent() });
        });
    }
});

Livewire组件监听同步事件 #

protected $listeners = ['sync-editor-content' => 'syncEditorContent'];

public function syncEditorContent($payload)
{
    $this->editorContent = $payload['content'];
    // 内容更新后的逻辑处理
}

方案三：结合wire:model实现自动同步 #

如果想直接用Livewire的双向绑定，需要手动同步TinyMCE内容到textarea，让wire:model感知到变化：

前端HTML #

<textarea id="myeditorinstance" wire:model="editorContent"></textarea>

TinyMCE初始化代码 #

tinymce.init({
    selector: '#myeditorinstance',
    setup: function(editor) {
        editor.on('change', function() {
            // 将编辑器内容同步到原生textarea
            document.querySelector('#myeditorinstance').value = editor.getContent();
            // 手动触发Livewire的输入更新事件
            Livewire.dispatch('input', { target: { id: 'myeditorinstance', value: editor.getContent() } });
        });
    }
});

Livewire组件代码 #

只需定义绑定的属性即可，无需额外监听事件：

public $editorContent = '';

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