Integrate CKEditor

[alacroixAskin]

Hello,

I'm using EasyAdminBundle version 3 with Symfony 5.1.
I need to create a WYSIWYG field, so I searched in your documentation and I've found the TextEditorField.
This is a kind of WYSIWYG but with less possibilities, I need to have more.

Would it be possible to integrate CKEditor like in version 2 ?

Thanks for answers.

[paulalbertdev]

Yo !
I've found a way by understanding how everything works together, and I need to tell the world 😄

1. Install the FOSCKEditor plugin following those instructions : https://symfony.com/doc/current/FOSCKEditorBundle/installation.html

2. But you don't need to write nothing in the fos_ckeditor.yaml file nor in the twig.yaml file, since EasyAdminBlundle uses its own form theme BUT, instead, you can set the form theme inside the configureCrud method :

public function configureCrud(Crud $crud): Crud
{
    $crud->setFormThemes(['@FOSCKEditor/Form/ckeditor_widget.html.twig', '@EasyAdmin/crud/form_theme.html.twig']);
    return $crud;
}

(don't forget to use the EA form theme too like I did)

3. Then create a new form field type for you CKeditor like this

namespace App\Admin\Field;

use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface;
use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;

final class CKEditorField implements FieldInterface
{
    use FieldTrait;

    /**
     * @param string|false|null $label
     */
    public static function new(string $propertyName, $label = null): self
    {
        return (new self())
            ->setProperty($propertyName)
            ->setLabel($label)

            // this template is used in 'index' and 'detail' pages
            ->setTemplateName('crud/field/text_editor')

            // this is used in 'edit' and 'new' pages to edit the field contents
            // you can use your own form types too
            ->setFormType(CKEditorType::class)
            ->addCssClass('field-ckeditor');
    }
}

annnnnnd... everything should work if you use the newly created Field type like this :

public function configureFields(string $pageName): iterable
{
    return [
        TextField::new('title'),
        CKEditorField::new('htmlContent'),
    ];
}

(this example doesn't use Webpack Encore at all, cause EA doesn't use it natively)

[AriesXIX]

Thank you so much for posting this solution - it works 100% with the current version of Symfony 6.2.x

[Luvelnet]

Thank you again. Very usefully.

[damienedgco]

it's not working with symfony 6.4 and easy admin 4

[pfpro]

it's not working with symfony 6.4 and easy admin 4

checkout this:
FriendsOfSymfony/FOSCKEditorBundle#253