如何将Froala Editor输入值传递到Laravel 8的Livewire组件中

问题根源 #

你遇到的$article字段为null的原因是：Froala Editor属于第三方前端组件，不会自动触发Livewire的wire:model双向绑定，加上你给编辑器父级加了wire:ignore，Livewire不会主动监听这部分区域的输入变化，需要手动通过Froala提供的事件将内容同步到Livewire组件属性。

具体修改步骤 #

仅需要调整Blade视图中Froala Editor的初始化JS代码，添加内容变化监听同步逻辑即可：

修改后的@push('js')代码块 #

@push('js')
<script>
 var editor = new FroalaEditor('#editor', {
        // 原有图片上传配置
        imageUploadURL: 'http://i.froala.com/upload',
        // 新增内容变化监听事件
        events: {
            'contentChanged': function () {
                // 将编辑器最新内容同步到Livewire的article属性
                @this.set('article', this.html.get());
            },
            // 可选：如果是编辑场景，组件初始化时将已有内容填充到编辑器
            'initialized': function () {
                this.html.set(@json($article));
            }
        }
    });
</script>
@endpush

可选优化 #

如果不需要实时同步（避免频繁触发Livewire请求），也可以选择在表单提交前一次性同步内容，代码如下：

// 给提交按钮添加点击事件，先同步内容再触发表单提交
document.querySelector('button[type="submit"]').addEventListener('click', function(e) {
    e.preventDefault();
    @this.set('article', editor.html.get());
    @this.call('submit');
});

修改完成后提交表单，$article属性即可正常获取到编辑器输入的内容。

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