English spoken conference

Symfony 5: The Fast Track

A new book to learn about developing modern Symfony 5 applications.

Support this project

Installation

Installation

Download the Bundle

Require the bundle in your composer.json file:

1
$ composer require friendsofsymfony/ckeditor-bundle

Register the Bundle

Then, 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 [email protected]^4.0.0

# if you are using Yarn as package manager
$ yarn add [email protected]^4.0.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
// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // ...
    .copyFiles([
        {from: './node_modules/ckeditor/', to: 'ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
        {from: './node_modules/ckeditor/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[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.