WYSIWYG Editor Integration in Symfony 6 using CKEditor

Integrating a WYSIWYG (What You See Is What You Get) editor into a Symfony project is relatively simple.
We will use the CKEditor library here, which perfectly meets this need, we will see how to integrate it into a simple form or into EasyAdmin.
Also, we will see how to configure the editor's toolbar, using presets or plugins that the CKEditor online builder provides.

 

Installation

 

Install Symfony CKEditor bundle from composer :
 

composer require friendsofsymfony/ckeditor-bundle

Make sure that the bundle is registered in the bundles.php file, otherwise add it:
 

<?php

return [
    // ...
	FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],
];

Then download the latest version of CKEditor from Symfony console:
 

php bin/console ckeditor:install

Finally, we have to send CKEditor (the previously installed folder that contains all the assets) to the public folder of our Symfony project:
 

php bin/console assets:install public

Integration of CKEditor in a form

 

To integrate the editor in a form, just create a new field with the CKEditorType type:
 

<?php

namespace App\Form\Type;

use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class PostEditType extends AbstractType {
    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
            ->add('title', TextType::class, [
                'label' => 'Title',
            ])
            ->add('content', CKEditorType::class)
            ->add('submit', SubmitType::class, [
                'label' => 'Send',
            ]);
    }
}

Render this form and you should see your new WYSIWYG editor!

 

Integration of CKEditor in EasyAdmin
 

If you use an EasyAdmin backoffice, the integration of the editor can be done as follows:
 

<?php

// ...
use FOS\CKEditorBundle\Form\Type\CKEditorType;
// ...

class PostCrudController extends AbstractPostTypeCrudController
{
    // ...

    public function configureFields(string $pageName): iterable
    {
        return [
            // ...
            TextEditorField::new('content', 'Contenu')->setFormType(CKEditorType::class),
            // ...
        ];
    }
}

CKEditor configuration
 

When you loaded the editor for the first time, you will notice that the toolbar is very filled. Maybe too filled!
The width, height or other editor settings may not suit you.
Of course, configuration is possible so that you are comfortable with your new editor and that's what we'll see in this section.
We will work in the file config/packages/fos_ckeditor.yaml.

Toolbar configuration
 

For quick and easy configuration, toolbar presets such as basic, standard or full can be applied as follows:
 

# config/packages/fos_ckeditor.yaml
fos_ck_editor:
    configs:
        main_config: 
            toolbar: standard

 

But you will probably want to adjust your tool configuration yourself.
Here is the toolbar configuration that I personally use on hugoderre.com :
 

# config/packages/fos_ckeditor.yaml
fos_ck_editor:
    configs:
        main_config:
            allowedContent: true # Disable filtering in the source code, for example on adding HTML properties
            height: 850
            width: 1000
            toolbar:
                - {
                    name: "styles",
                    items: 
                      [
                        "Bold",
                        "Italic",
                        "Underline",
                        "Strike",
                        "CodeSnippet", 
                        "Code",
                        "Blockquote",
                        "-",
                        "Link",
                        "-",
                        "RemoveFormat",
                        "NumberedList",
                        "BulletedList",
                        "-",
                        "Outdent",
                        "Indent",
                        "-",
                        "-",
                        "JustifyLeft",
                        "JustifyCenter",
                        "JustifyRight",
                        "JustifyBlock",
                        "-",
                        "Image",
                        "Table",
                        "-",
                        "TextColor",
                        "BGColor",
                        "HorizontalRule",
                        "/",
                        "Styles", "Format", "Font", "FontSize", "Source",
                      ]
                  }

CodeSnippet and Code are CKEditor plugins, additional configuration is required to use them (go to the next section to add plugins 😏).
Personally there is everything I need to write my articles, a real happiness on a daily basis. Free to add or remove elements!

CKEditor plugins
 

In the previous section, we saw that some components of the toolbar, such as CodeSnippet and Code, were coming from external plugins to the basic CKEditor package. You will learn here how to add them to your configuration.

CodeSnippet allows to write blocks of code directly in our editor. Its default implementation includes the highlight.js library. If you want the syntax coloring of highlight.js to be visible elsewhere than in the visual rendering of CKEditor, then you will have to import the library yourself, if you are interested I have already written an article on the integration of highlight.js.
 

console.log('Code snippet written from CodeSnippet plugin!')

CodeTag allows you to frame code-like words => console.log('Like this').

We will see here how to add these two elements in our toolbar thanks to the plugins :
 

1. CKEditor has an online builder that allows you to recreate a package containing all the plugins that you will have decided to install. So create a new CKEditor package in the full format and add the plugins CodeSnippet and CodeTag.
2. Once the zip file is downloaded, you need to extract the ckeditor folder in your Symfony project in the public/bundles folder.
3. Finally, you must indicate in your configuration file fos_ckeditor.yaml the relative path to the new ckeditor folder freshly installed:
    

# config/packages/fos_ckeditor.yaml
fos_ck_editor:
    base_path: "bundles/ckeditor"
    js_path:   "bundles/ckeditor/ckeditor.js"