Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • SensioLabs Professional services to help you with Symfony
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by SensioLabs
  1. Home
  2. Documentation
  3. Bundles
  4. FOSCKEditorBundle
  5. Installation
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Download the Bundle
  • Register the Bundle
  • Download CKEditor
    • With bundle's command
    • Using Webpack Encore
  • Install the Assets
  • Configure Twig

Installation

Edit this page

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
    We stand with Ukraine.
    Version:
    Get your Symfony expertise recognized

    Get your Symfony expertise recognized

    Be trained by SensioLabs experts (2 to 6 day sessions -- French or English).

    Be trained by SensioLabs experts (2 to 6 day sessions -- French or English).

    Symfony footer

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of Mehdi Mabrouk, a Symfony contributor

    Thanks Mehdi Mabrouk (@mehdidev) for being a Symfony contributor

    1 commit • 4 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony