Installation

Download the Bundle

Require the bundle in your composer.json file:

        1
        $ composer require friendsofsymfony/ckeditor-bundle
    

Register the Bundle

If you're using Symfony >= 4.0, skip this step, as it is automatically done by Flex's recipe.

If you choose to not execute the recipe, and if you're using Symfony >= 4.0, update your config/bundles.php:

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

If you're using Symfony < 4.0, update your app/AppKernel.php:

        1
2
3
4
5
6
7
8
9
10
11
12
        class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            new FOS\CKEditorBundle\FOSCKEditorBundle(),
            // ...
        );

        // ...
    }
}
    

Download CKEditor

With bundle's command

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

If you're using Symfony <= 2.8:

        1
        $ php app/console ckeditor:install
    

If you're using Symfony >= 3.0:

        1
        $ php bin/console ckeditor:install
    

If you want to learn more about this command, you can read its documentation.

Using Webpack Encore

If you have installed Webpack Encore, you may want to have it as a `node_module` dependency.

You can by running this command:

        1
2
3
4
5
        # if you are using NPM as package manager
$ npm install --save ckeditor4@^4.13.0

# if you are using Yarn as package manager
$ yarn add ckeditor4@^4.13.0
    

Once installed, add the following lines to your Webpack Encore configuration file (this excludes the samples directory from the ckeditor node module):

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        // webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // ...
    .copyFiles([
        {from: './node_modules/ckeditor4/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
        {from: './node_modules/ckeditor4/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/skins', to: 'ckeditor/skins/[path][name].[ext]'},
        {from: './node_modules/ckeditor4/vendor', to: 'ckeditor/vendor/[path][name].[ext]'}
    ])
    // Uncomment the following line if you are using Webpack Encore <= 0.24
    // .addLoader({test: /\.json$/i, include: [require('path').resolve(__dirname, 'node_modules/ckeditor')], loader: 'raw-loader', type: 'javascript/auto'})
;
    

Then, override the bundle's configuration to point to the new CKEditor path:

        1
2
3
4
        fos_ck_editor:
    # ...
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"
    

Finally, run encore command:

        1
2
3
4
5
        # if you are using NPM as package manager
$ npm run dev

# if you are using Yarn as package manager
$ yarn run encore dev
    

Install the Assets

Note

This step is not required if you are using Webpack Encore.

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

If you're using Symfony <= 2.8:

        1
        $ php app/console assets:install web
    

If you're using Symfony >= 3.0 without Symfony Flex:

        1
        $ php bin/console assets:install web
    

If you're using Symfony Flex:

        1
        $ php bin/console assets:install public
    

Configure Twig

Note

This step is not required if you installed the bundle using Symfony Flex and the recipe was installed.

Finally, add some configuration under the twig.form_themes config key:

        1
2
3
4
5
6
        # Symfony 2/3: app/config/config.yml
# Symfony 4: config/packages/twig.yaml

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

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

TOC

Version

Peruse our complete Symfony & PHP solutions catalog for your web development needs.

No stress: we've got you covered with our 116 automated quality checks of your code