Laravel Livewire同一页面使用多个CKEditor组件的ID传递问题

核心实现逻辑 #

Blade 模板内的 <script> 标签本身支持服务端变量插值，你可以直接在 JS 代码中输出 $ckeId 变量值，不需要额外的传值步骤，同时需要扩展组件的字段标识参数，避免多实例事件冲突。

1. 修改 Livewire 控制器代码 #

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class CkeditorRich extends Component
{
    public $value;
    public $ckeId;
    public $fieldName; // 新增字段标识属性
    const EVENT_VALUE_UPDATED = 'cke_rich_value_updated';

    // 新增$fieldName入参
    public function mount($value = '', $fieldName = '')
    {
        $this->value = $value;
        $this->fieldName = $fieldName;
        $this->ckeId = 'cke-' . uniqid();
    }
    public function render()
    {
        return view('livewire.ckeditor-rich');
    }
    public function updatedValue($value)
    {
        // 事件推送时同时传递字段标识和值
        $this->emit(self::EVENT_VALUE_UPDATED, $this->fieldName, $this->value);
    }
}

2. 修改 Blade 视图代码 #

<div>
    <div wire:ignore class="form-group row">
        <div class="w-full">
            <input id="{{ $ckeId }}" type="hidden" name="value" value="{{ $value }}">
            <!-- 给textarea添加动态唯一ID -->
            <textarea wire:model='value' class="form-control required" name="editor" id="editor-{{ $ckeId }}"></textarea>
        </div>
    </div>

    <script>
        ClassicEditor
            // 直接通过Blade插值输出动态ID选择器
            .create(document.querySelector('#editor-{{ $ckeId }}')

                , {
                    plugins: ['Heading', 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript',
                        'List', 'HorizontalLine',
                        'FontBackgroundColor', 'FontColor', 'FontFamily', 'FontSize', 'RemoveFormat',
                        'SpecialCharacters',
                        'Indent', 'IndentBlock', 'BlockQuote', 'CodeBlock',
                        'Link', 'FindAndReplace', 'HtmlEmbed', 'MediaEmbed', 'Image', 'ImageToolbar', 'ImageInsert',
                        'ImageResize', 'ImageStyle', 'ImageCaption',
                        'Autoformat', 'Essentials'
                    ],

                    toolbar: ['heading', 'bold', 'italic', 'underline', 'subscript', 'superscript', '|',
                        'bulletedList', 'numberedList', 'horizontalline', '|',
                        'fontbackgroundcolor', 'FontColor', 'fontfamily', 'fontsize', 'removeformat',
                        'specialcharacters', '|',
                        'indent', 'outdent', '|', 'blockQuote', 'codeBlock', ' | ',
                        'link', 'findandreplace', 'htmlembed', 'mediaembed', 'insertimage', '|',
                        'undo', 'redo'
                    ],


                    heading: {
                        options: [{
                                model: 'paragraph',
                                title: 'Paragraph',
                                class: 'ck-heading_paragraph'
                            },
                            {
                                model: 'heading1',
                                view: 'h1',
                                title: 'Heading 1',
                                class: 'ck-heading_heading1'
                            },
                            {
                                model: 'heading2',
                                view: 'h2',
                                title: 'Heading 2',
                                class: 'ck-heading_heading2'
                            },
                            {
                                model: 'heading3',
                                view: 'h3',
                                title: 'Heading 3',
                                class: 'ck-heading_heading3'
                            }
                        ]
                    },
                    image: {
                        toolbar: [

                            'imageStyle:side',
                            'imageStyle:alignRight',
                            'imageStyle:alignLeft',
                            'imageStyle:alignCenter',
                            'imageStyle:alignBlockRight',
                            'imageStyle:alignBlockLeft',
                            '|',

                            'imageTextAlternative',
                            'toggleImageCaption',
                            '|',
                        ]
                    },
                    codeBlock: {
                        languages: [{
                                language: 'css',
                                label: 'CSS'
                            },
                            {
                                language: 'html',
                                label: 'HTML'
                            },
                            {
                                language: 'php',
                                label: 'PHP',
                                class: 'php-code'
                            },
                        ]
                    }

                })
            .then(editor => {
                editor.model.document.on('change:data', () => {
                    @this.set('value', editor.getData());
                })
            })
            .catch(error => {
                console.error('there was a problem : ' + error);
            });
    </script>

</div>

3. 页面多实例调用代码 #

{{-- 正文编辑器 --}}
@livewire('ckeditor-rich',['value'=>$body, 'fieldName'=>'body'])
{{-- 摘要编辑器 --}}
@livewire('ckeditor-rich',['value'=>$abstract, 'fieldName'=>'abstract'])

4. 修改父控制器监听处理逻辑 #

protected $listeners = [
    // 其他监听事件
    'cke_rich_value_updated' => 'editor_value_updated',
    // 其他监听事件
];

// 接收字段标识和对应值，动态赋值
public function editor_value_updated($fieldName, $value)
{
    $this->$fieldName = $value;
}

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