phpsymfonyckeditoreasyadmin

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


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

  • 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())