how to install Ckeditor on symfony 5?

Question

I'd like to install CKeditor on my symfony project using symfony5

I tried to perform this tutorial but i didn't manage some parts. : https://symfony.com/doc/current/bundles/FOSCKEditorBundle/installation.html

1/ i did this command with success:

composer require friendsofsymfony/ckeditor-bundle

2/ I didn't perform the Register the bundle parts cause it' already in my config/bundles.php (so i assumed the documentation wasn't up to date)

3/ I added this to my fileType.php

use FOS\CKEditorBundle\Form\Type\CKEditorType;

class PropertyType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
->add('description', CKEditorType::class)

And my twig file is behind but nothing appear in the description field which stay a classic textarea

<div class="col-lg-9">
    {{ form_widget(form.description) }}
</div>

The rendered template display this in the source code:

<div class="col-lg-9">
     <textarea id="property_description" name="property[description]" required="required"></textarea>
<script type="text/javascript">
            var CKEDITOR_BASEPATH = "/bundles/fosckeditor/";
</script>
<script type="text/javascript" src="/bundles/fosckeditor/ckeditor.js"></script>
<script type="text/javascript">
        if (CKEDITOR.instances["property_description"]) { CKEDITOR.instances["property_description"].destroy(true); delete CKEDITOR.instances["property_description"]; }
        CKEDITOR.replace("property_description", {"language":"en"});
</script>

I've this in chrome console :

> Failed to load resource: the server responded with a status of 404
> (Not Found) new:95 Uncaught ReferenceError: CKEDITOR is not defined
>     at new:95 :8000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Thanks to all, i'm a bit lost with this one...

Answer 1

Download the Bundle

$ composer require friendsofsymfony/ckeditor-bundle

Register the Bundle

Then, update your config/bundles.php:

return [

 // ...

FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],

// ...

];

Download CKEditor

Once, you have registered the bundle, you need to install CKEditor:

$ php bin/console ckeditor:install

Install the Assets

Once, you have downloaded CKEditor, you need to install it in the web directory.

$ php bin/console assets:install public

Configure Twig

Then, update your /config/packages/twig.yaml

twig:
    // ...
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'
    // ...

Usage

use FOS\CKEditorBundle\Form\Type\CKEditorType;

$builder->add('field', CKEditorType::class, array(
    'config' => array(
        'uiColor' => '#ffffff',
        //...
    ),
));

Answer 2

Did you perform the php bin/console ckeditor:install documented on this part ?

The 404 issue may come from the ckeditor.js not found therefore it's expected to fail with CKEDITOR is not defined. You can read the documentation for the ckeditor install symfony command to get more information.