CKEditor Not Displaying in Modal with Livewire

I am working on a survey builder where I let the user add different questions based on the field they select. For the question field, I want to use 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>



Code to Add Field:

<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>



Method:

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


Listener:

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

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


Issue The issue I'm encountering is that the modal displays a simple textarea instead of CKEditor. However, when I remove the if statement from my project, it displays it correctly. I've tried different solutions but nothing seems to work.

When I click on "Add," I want it to display a modal with CKEditor.

Continue reading...