CKEditor 未使用 Livewire 在模态中显示

Question

我正在开发一个调查生成器，让用户根据他们选择的字段添加不同的问题。对于问题字段，我想使用 CKEditor。

<div>
@if($isOpen)
    <div class="fixed inset-0 bg-opacity-50 flex items-center justify-center">
        <div class="bg-white p-4 rounded-lg w-1/2">
            <h2 class="text-lg font-bold mb-4">Add {{ ucfirst($fieldType) }}</h2>

            <div>
                <label for="question" class="block mb-2">Question</label>
                <textarea id="question" wire:model="question" class="form-control"></textarea>
            </div>

            @if (in_array($fieldType, ['checkbox', 'radio', 'dropdown']))
                <div class="mt-4">
                    <h3 class="text-sm font-bold">Options</h3>
                    @foreach ($options as $index => $option)
                        <div class="flex items-center mb-2">
                            <input type="text" wire:model="options.{{ $index }}" class="form-control mr-2" placeholder="Option {{ $index + 1 }}">
                            <button wire:click.prevent="removeOption({{ $index }})" class="bg-red-500 text-white px-2 py-1 rounded">Remove</button>
                        </div>
                    @endforeach
                    <button wire:click.prevent="addOption" class="bg-blue-500 text-white px-2 py-1 rounded">Add Option</button>
                </div>
            @endif

            <!-- Modal Actions -->
            <div class="mt-4 flex justify-end">
                <button wire:click.prevent="saveField" class="bg-green-500 text-white px-4 py-2 rounded">Save Field</button>
                <button wire:click.prevent="closeModal" class="bg-gray-500 text-white px-4 py-2 rounded ml-2">Cancel</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.ckeditor.com/ckeditor5/37.0.1/classic/ckeditor.js"></script>
    <script>
    ClassicEditor
        .create(document.querySelector('#question'))
        .catch(error => {
            console.error(error);
        });
    </script>
@endif
</div>

添加字段的代码：

<div class="field-options w-1/4 bg-gray-100 p-4 rounded-lg space-y-4">
    <button wire:click.prevent="addField('textfield')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Textfield</button>
    <button wire:click.prevent="addField('textbox')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Textbox</button>
    <button wire:click.prevent="addField('checkbox')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Checkbox</button>
    <button wire:click.prevent="addField('radio')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Radio Buttons</button>
    <button wire:click.prevent="addField('dropdown')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Drop Down</button>
    <button wire:click.prevent="addField('file')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Image/File Slot</button>
</div>

方法：

public function addField($type)
{
    $this->dispatch('openModal', $type);
}

听众：

protected $listeners = ['openModal' => 'open'];

public function open($fieldType)
{
    $this->reset();
    $this->fieldType = $fieldType;
    $this->isOpen = true;  
}

问题 我遇到的问题是模式显示一个简单的文本区域而不是 CKEditor。但是，当我从项目中删除 if 语句时，它会正确显示。我尝试了不同的解决方案，但似乎没有任何效果。

当我单击“添加”时，我希望它显示带有 CKEditor 的模式。

Answer 1

Livewire 在服务器端呈现 HTML。最初，当页面加载时，CKEditor 不会显示。但是，当您打开模式时，Livewire 会重新渲染 Blade 模板，但 JavaScript 不会重新初始化。

这解释了为什么删除 if 语句可以解决问题：初始服务器端渲染会触发 JavaScript，后续重新渲染不会干扰它。

要解决此问题，请考虑使用 Alpine.js 初始化 CKEditor，而不是依赖当前的 JavaScript 解决方案。 Livewire 将识别新渲染的 HTML 中的 Alpine 组件，并相应地重新初始化 Alpine.js。

仅供参考，我使用人工智能重新写了这个答案，因为英语不是我的主要语言