Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

katemiz's avatar

CKEDITOR 5 Livewire Component

I have a ckeditor component with a ck-editor.blade.php file as follows:

<input type="hidden" id="H{{$edId}}" value="{{ $content }}">

<script>

    ClassicEditor
        .create(document.querySelector('#{{$edId}}'),editorConfig)
        .then(editor => {
            editor.setData( document.getElementById('H{{$edId}}').value );
            editor.model.document.on('change:data', () => {
                @this.set('content', editor.getData());
            })
        })
        .catch(error => {
            console.error(error);
        });

</script>

In my form it is called out as follows:

    <livewire:ck-editor
        edId="ed10"
        wire:model="text"
        label='Requirement Text / Description'
        placeholder='Requirement text/description ....'
        :content="$text"/>

Everything works fine but:

When I try to add more functionality to toolbar, toolbar does not show new added plugins icons. Using the same ckeditor.js in sample folder, editor shows the added icons but not in livewire component.

What would I be missing?

0 likes
1 reply

Please or to participate in this conversation.