Installation
Edit this pageInstallation
Download the Bundle
Require the bundle in your composer.json file:
1
$ composer require friendsofsymfony/ckeditor-bundleRegister 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:installIf you're using Symfony >= 3.0:
1
$ php bin/console ckeditor:installIf 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.0Once 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 devInstall 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 webIf you're using Symfony >= 3.0 without Symfony Flex:
1
$ php bin/console assets:install webIf you're using Symfony Flex:
1
$ php bin/console assets:install publicConfigure 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'
