CKEditor does not initialize on new CollectionField items in EasyAdmin Symfony — how to fix?

I'm using EasyAdmin 4 with Symfony, and I have a CollectionField that includes form fields with CKEditor (via Symfony's FOSCKEditorType or similar).

CKEditor loads fine for existing collection entries, but when I add a new item dynamically via the "Add new item" button, the CKEditor does not initialize on the new textarea.

🔍 What I tried:

• CKEditor is loaded and works on page load.

• New textareas appear when I add items, but CKEditor doesn't attach to them.

• Tried triggering CKEDITOR.replace() manually — no success.

• Using default Symfony + EasyAdmin JS setup, no custom overrides.

✅ Answer:

This is a common issue because CKEditor needs to be manually re-initialized on dynamically added fields inside CollectionField.

🔧 Fix: Manually re-initialize CKEditor when new fields are added

You can do this by listening to the ea.collection.item-added event that EasyAdmin dispatches.

Add this JavaScript to your EasyAdmin layout or as a custom Stimulus controller:

javascript

CopyEdit

document.addEventListener('ea.collection.item-added', function (event) { const newFormItem = event.detail.item; const textareas = newFormItem.querySelectorAll('textarea'); textareas.forEach(textarea => { if (textarea.classList.contains('ckeditor') && !textarea.id.startsWith('cke_')) { // Replace with CKEDITOR.replace or ClassicEditor.create depending on your setup CKEDITOR.replace(textarea.id); } }); });

🧠 Notes:

• Make sure the textarea has a unique ID, otherwise CKEditor won't attach.

• You might need to delay execution slightly using setTimeout() if CKEditor loads too early.

• If you’re using CKEditor 5, use ClassicEditor.create() instead of CKEDITOR.replace().

📦 Example (CKEditor 5):

javascript

CopyEdit

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; document.addEventListener('ea.collection.item-added', function (event) { const newFormItem = event.detail.item; const textareas = newFormItem.querySelectorAll('textarea'); textareas.forEach(textarea => { if (!textarea.classList.contains('ck-editor__editable')) { ClassicEditor.create(textarea).catch(error => { console.error(error); }); } }); });