Integrating FOSCKEditorBundle to Create a WYSIWYG Editor

1.x version
Maintained

Integrating FOSCKEditorBundle to Create a WYSIWYG Editor

EasyAdmin uses a <textarea> form field to render long text properties:

Default textarea for text elements

However, sometimes you need to provide to your users a rich editor, commonly named WYSIWYG editor. Although EasyAdmin doesn't provide any built-in rich text editor, you can integrate one very easily.

Installing the Rich Text Editor

The recommended WYSIWYG editor is called CKEditor and you can integrate it thanks to the FOSCKEditorBundle:

  1. Install the bundle:
1
$ composer require friendsofsymfony/ckeditor-bundle
  1. Enable the bundle:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// app/AppKernel.php
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        return array(
            // ...
            new FOS\CKEditorBundle\FOSCKEditorBundle(),
        );
    }
}
  1. Install CKEditor:
1
2
3
4
5
# Symfony 2
$ php app/console ckeditor:install

# Symfony 3
$ php bin/console ckeditor:install
  1. Install the JavaScript/CSS files used by the bundle:
1
2
3
4
5
# Symfony 2
$ php app/console assets:install --symlink

# Symfony 3
$ php bin/console assets:install --symlink

Using the Rich Text Editor

FOSCKEditorBundle provides a new form type called fos_ckeditor. Set the type option of any property to this value to display its contents using a rich text editor:

1
2
3
4
5
6
7
8
easy_admin:
    entities:
        Product:
            # ...
            form:
                fields:
                    # ...
                    - { property: 'description', type: 'fos_ckeditor' }

Tip

Even if your application uses Symfony 3 there is no need to use the FQCN of the CKEditorType (type: 'FOS\CKEditorBundle\Form\Type\CKEditorType') because EasyAdmin supports the short types for some popular third-party bundles.

Now, the description property will be rendered as a rich text editor and not as a simple <textarea>:

Default WYSIWYG editor

Customizing the Rich Text Editor

EasyAdmin tweaks some CKEditor settings to improve the user experience. In case you need further customization, configure the editor globally in your Symfony application under the fos_ck_editor option. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# app/config/config.yml
fos_ck_editor:
    input_sync: true
    default_config: base_config
    configs:
        base_config:
            toolbar:
                - { name: "styles", items: ['Bold', 'Italic', 'BulletedList', 'Link'] }

easy_admin:
    entities:
        Product:
            # ...
            form:
                fields:
                    # ...
                    - { property: 'description', type: 'fos_ckeditor' }

In this example, the toolbar is simplified to display just a few common options:

Simple WYSIWYG editor

Alternatively, you can also define the editor options in the type_options setting of the property:

1
2
3
4
5
6
7
8
easy_admin:
    entities:
        Product:
            # ...
            form:
                fields:
                    # ...
                    - { property: 'description', type: 'fos_ckeditor', type_options: { 'config': { 'toolbar': [ { name: 'styles', items: ['Bold', 'Italic', 'BulletedList', 'Link'] } ] } } }

This inline configuration is very hard to maintain, so it's recommended to use the global configuration instead. You can even combine both to define the toolbars globally and then select the toolbar to use in each property:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# app/config/config.yml
fos_ck_editor:
    input_sync: true
    default_config: simple_config
    configs:
        simple_config:
            toolbar:
                # ...
        advanced_config:
            toolbar:
                # ...

easy_admin:
    entities:
        Product:
            # ...
            form:
                fields:
                    # ...
                    - { property: 'excerpt', type: 'fos_ckeditor',
                        type_options: { config_name: 'simple_config' } }
                    - { property: 'description', type: 'fos_ckeditor',
                        type_options: { config_name: 'advanced_config' } }

Check out the original CKEditor documentation to get its full list of configuration options.

Integrating CKFinder

CKFinder is a file manager plugin developed for CKEditor. First, follow its documentation to download and install the "CKFinder PHP Connector" somewhere in your Symfony application. Then, read the CKEditor integration docs and create a JavaScript file to store the needed code (e.g. web/js/setup-ckfinder.js).

Finally, use the design.assets.js config option to include that file in every page loaded by EasyAdmin:

1
2
3
4
5
6
7
easy_admin:
    design:
        assets:
            js:
                - '/bundles/cksourceckfinder/ckfinder/ckfinder.js'
                - '/js/setup-ckfinder.js'
                # ...

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.