CKEditor не отображается в модальном окне с Livewire

Question 1

Я работаю над конструктором опросов, в котором позволяю пользователю добавлять различные вопросы в зависимости от выбранной им категории. Для поля вопроса я хочу использовать 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">Добавить {{ ucfirst($fieldType) }}</h2>

            <div>
                <label for="question" class="block mb-2">Вопрос</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">Варианты</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="Вариант {{ $index + 1 }}">
                            <button wire:click.prevent="removeOption({{ $index }})" class="bg-red-500 text-white px-2 py-1 rounded">Удалить</button>
                        </div>
                    @endforeach
                    <button wire:click.prevent="addOption" class="bg-blue-500 text-white px-2 py-1 rounded">Добавить вариант</button>
                </div>
            @endif

            <!-- Действия модального окна -->
            <div class="mt-4 flex justify-end">
                <button wire:click.prevent="saveField" class="bg-green-500 text-white px-4 py-2 rounded">Сохранить поле</button>
                <button wire:click.prevent="closeModal" class="bg-gray-500 text-white px-4 py-2 rounded ml-2">Отмена</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">Текстовое поле</button>
    <button wire:click.prevent="addField('textbox')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Текстовое поле</button>
    <button wire:click.prevent="addField('checkbox')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Чекбокс</button>
    <button wire:click.prevent="addField('radio')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Переключатели</button>
    <button wire:click.prevent="addField('dropdown')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Выпадающий список</button>
    <button wire:click.prevent="addField('file')" class="w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600">Слот для изображения/файла</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. Однако когда я удаляю условие из моего проекта, оно отображается правильно. Я пробовал разные решения, но ничего не работает.

Когда я нажимаю “Добавить”, я хочу, чтобы отображалось модальное окно с CKEditor.

Question 2

Livewire рендерит HTML на стороне сервера. Сначала, когда страница загружается, CKEditor не отображается. Однако, когда вы открываете модальное окно, Livewire повторно рендерит шаблон Blade, но JavaScript не инициализируется снова.

Это объясняет, почему удаление условия решает проблему: начальная серверная рендеринг запускает JavaScript, а последующие повторные рендеринги его не мешают.

Чтобы исправить это, рассмотрите возможность использования Alpine.js для инициализации вашего CKEditor вместо полагания на ваше текущее решение на JavaScript. Livewire распознает компонент Alpine в новом рендеринге HTML и повторно инициализирует Alpine.js соответственно.

К вашему сведению, я переписал этот ответ с использованием ИИ, так как английский не является моим родным языком.

CKEditor не отображается в модальном окне с Livewire

Вопрос или проблема

Ответ или решение

Решение проблемы с отображением CKEditor в модальном окне с Livewire

Введение

Основная проблема

Причина проблемы

Решение с использованием Alpine.js

Шаги по интеграции:

Заключение