I’m using EasyAdmin with a CollectionField that contains a form with a CKEditor field (using FOSCKEditorBundle). When I add new items dynamically in the admin UI, the CKEditor does not load on the new textareas — they stay plain textareas.
How can I make CKEditor initialize automatically on newly added collection items?
Here is my code:
<?php
declare(strict_types=1);
namespace App\Controller\Admin;
use App\Entity\Tutorial\Tutorial;
use App\Form\Type\IntroStepType;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\CollectionField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
class TutorialCrudController extends AbstractCrudController
{
public static function getEntityFqcn(): string
{
return Tutorial::class;
}
public function configureCrud(Crud $crud): Crud
{
return $crud
->addFormTheme('@FOSCKEditor/Form/ckeditor_widget.html.twig')
;
}
public function configureFields(string $pageName): iterable
{
yield TextField::new('page', 'Huidige pagina URL');
yield CollectionField::new('introSteps', 'Stappen')
->setEntryType(IntroStepType::class)
->allowAdd()
->allowDelete()
->renderExpanded();
yield TextField::new('nextPage', 'Volgende pagina URL')
->setHelp('Laat leeg bij de aller laatste stap van de tutorial');
}
}
<?php
declare(strict_types=1);
namespace App\Form\Type;
use App\Entity\Tutorial\IntroStep;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class IntroStepType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('title', TextType::class, [
'label' => 'Titel',
])
->add('element', TextType::class, [
'label' => 'Element',
])
->add('intro', CKEditorType::class, [
'label' => 'Instructies',
]);
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => IntroStep::class,
]);
}
}
Solution: Don't use the CKEditor and add this to the CollectionField. This will also get you a richt text editor in easyadmin collectionfield.
->addJsFiles(Asset::fromEasyAdminAssetPackage('field-text-editor.js')->onlyOnForms())
->addCssFiles(Asset::fromEasyAdminAssetPackage('field-text-editor.css')->onlyOnForms())