Attention, cet article est obsolète et ce tuto est rédigé pour Symfony 2, je te déconseille d’appliquer ce que je dis là.
CKEditor est un éditeur WIZIWIG(What you see is what you get). Il est facilement personnalisable et de nombreux plugins sont disponibles.

CKEditor avec IvoryCKEdirorBundle
Dans ce tuto, nous allons utiliser le bundle IvoryCKEditorBundle qui va nous simplifier l’intégration de CKEditor.
Instalation
{
"require": {
"egeloen/ckeditor-bundle": "4.*",
}
}
$bundles = array(
// ...
new Ivory\CKEditorBundle\IvoryCKEditorBundle(),
);
N’oublies pas d’installer les assets (si pas déjà fait par un composer update) :
php bin/console asset:install --symlink
Configuration
ivory_ck_editor:
default_config: my_custom_config # Utiliser par defaut la configuration my_custom_config
configs:
my_custom_config:
language: "%locale%"
toolbar: "standard" # Charger la toolbar tollbar_1 (voir plus bas)
stylesSet: "my_styles" # Chargement des styles personnalisables my_styles (voir plus bas)
uiColor: "#FCFCFC" # Couleur de fond de l'interface
height: "600px" # Hauteur par défaut
contentsCss: ['bundles/app/css/style.css'] # Charge les styles dans l'éditeur (permet de voir en temps réel le résultat)
styles: # Configuration des styles personnalisables
my_styles:
- { name: "Alert Success", element: "div", attributes: { class: "alert alert-success", role: "alert" }}
- { name: "Alert Info", element: "div", attributes: { class: "alert alert-info", role: "alert" }}
- { name: "Alert Warning", element: "div", attributes: { class: "alert alert-warning", role: "alert" }}
- { name: "Alert Danger", element: "div", attributes: { class: "alert alert-danger", role: "alert" }}
- { name: "Badge", element: "span", attributes: { class: "badge" }}
Utilisation
Pour charger CKEditor dans un formBuilder :
->add('content', CKEditorType::class, array (
'label' => 'Contenu',
))
Tu peux aussi passer des options supplémentaires directement dans le formBuilder :
->add('content', CKEditorType::class, array (
'label' => 'Contenu',
'config_name' => 'my_custom_config',
'config' => array(
'language' => 'fr'
),
))
Configuration avancée
Utiliser un skin
Télécharges un skin sur le site officiel et ajoutes le dans un répertoire public (dans /web/bundles/…)
Tu peux aussi l’ajouter dans un répertoire public d’un bundle et installer les assets.
ivory_ck_editor:
configs:
my_custom_config:
skin: "skin_name,/absolute/web/skin/path/"
Personnalises la barre de boutons
De base, 3 types de toolbars sont pré-configurés : full, standard, basic.
ivory_ck_editor:
configs:
my_custom_config:
toolbar: "standard"
Tu peux aussi personnaliser toi-même la toolbar :
ivory_ck_editor:
default_config: "my_custom_config"
configs:
my_custom_config:
uiColor: "#FCFCFC"
toolbar: [ [ 'Preview' ], [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ], [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ], [ 'Source' ], [ "About" ], "/", [ 'Bold','Italic','Underline','Strike', 'Blockquote','Subscript','Superscript','-','RemoveFormat' ], [ 'NumberedList','BulletedList','-','Outdent','Indent','-','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ], [ 'Link','Unlink','Anchor' ], [ 'pbckcode', 'Image', 'Video', 'Table','SpecialChar','Iframe' ], '/', [ 'Styles', 'Format','Font','FontSize' ], [ 'TextColor','BGColor' ], [ 'RemoveFormat' ], [ 'Maximize' ] ]
Tu peux ajouter ou enlever des boutons à souhait. Retrouves la liste complète des boutons disponibles.
Il est aussi possible de définir des toolbars personalisées et les partager entre plusieurs configurations. Exemple :
ivory_ck_editor:
configs:
my_config_1:
toolbar: "my_toolbar_1"
uiColor: "#000000"
# ...
my_config_2:
toolbar: "my_toolbar_2"
uiColor: "#ffffff"
# ...
toolbars:
configs:
my_toolbar_1: [ "@document", "/", "@link" , "/", "@tool" ]
my_toolbar_2: [ [ "Source", "-", "Save" ], "/", [ "Anchor" ], "/", [ "Maximize" ] ]
items:
document: [ "Source", "-", "Save" ]
link: [ "Anchor" ]
tool: [ "Maximize" ]
Utiliser un plugin
Télécharges un plugin sur le site de CKEditor et ajoutes le dans un répertoire public de votre application.
Exemple pour le plugin Vidéo qui nous permet d’ajouter des vidéos HTML5 dans l’éditeur :
Je le place dans mon répertoire src/AppBundle/Ressources/public/ckeditor/video puis :
php bin/console asset:install --symlink
config.yml
ivory_ck_editor:
plugins:
video:
path: "/bundles/app/ckeditor/video/"
filename: "plugin.js"
default_config: "my_custom_config"
configs:
my_custom_config:
toolbar: [ ['Video' ], '/', [ 'RemoveFormat' ], [ 'Maximize' ] ]
extraPlugins: "'video"
Plus de documentation
Consultes le github du bundle ou la documentation par symfony de CKEditor.
Gestionnaire de média avec FMElfinderBundle
Tout va bien jusque là, mais pour ajouter une image, ça devient vite compliqué si elle est en local par exemple. On doit l’envoyer sur un serveur, trouver son lien direct, le copier, etc …
Pour palier à ce problème, nous allons utiliser un bundle qui va intégrer tout seul un gestionnaire de média à l’interface CKEditor. Ainsi tu pourra ajouter, modifier, supprimer les images, vidéos, pdfs, etc … directement depuis l’interface.
Exemple :

Installation de FMElfinderBundle
{
"require": {
"helios-ag/fm-elfinder-bundle": "6.*",
}
"config": {
"component-dir": "web/dossier_de_mon_choix" # Les ressources utilisés par fm-elfinder seront placées dans ce dossier
}
}
$bundles = array(
// ...
new FM\ElfinderBundle\FMElfinderBundle(),
);
elfinder:
resource: "@FMElfinderBundle/Resources/config/routing.yml"
Configuration
fm_elfinder:
assets_path: dossier_de_mon_choix # Le dossier configuré dans composer.json
instances:
ckeditor:
locale: "%locale%"
editor: "ckeditor"
fullscreen: false
include_assets: true
connector:
debug: false
roots:
uploads:
driver: "LocalFileSystem"
path: "your_path_in_public_directory"
upload_allow: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'application/zip', 'audio/mpeg', 'text/csv', 'video/mp4', 'video/webm', 'application/pdf']
upload_deny: ['all']
upload_max_size: "8M"
ivory_ck_editor:
default_config: my_custom_config
configs:
my_custom_config:
toolbar: "full"
filebrowserBrowseRoute: "elfinder"
filebrowserBrowseRouteParameters:
instance: "ckeditor"
C’est tout ! Il ne reste plus qu’à essayer. Cliques sur ajouter une image et sur Explorer le serveur. N’oublies par de créer le répertoire ‘your_path_in_public_directory’ dans le répertoire web de votre application sinon CKEditor ne pourra pas envoyer les images et tu aura une alerte indiquant que votre configuration est invalide.
Utiliser le BBcode
Utiliser le BBcode permet d’éviter d’avoir du code html dans votre base de donnée. C’est plus ou moins une bonne pratique. Un code en BBcode ressemble à :
[b]Ceci est un texte d'exemple en gras[/b]
[url]http://www.domain.com[/url]
Ckeditor propose un plugin bbcode qu’il faut installer. (Revoir comment installer un plugin)
Ensuite un peu de configuration :
ivory_ck_editor:
plugins:
bbcode:
path: '/bundles/app/js/ckeditor/bbcode/'
filename: 'plugin.js'
configs:
normal:
# votre config sans bbcode ...
# ...
bbcode:
toolbar: [[ 'Bold', 'Italic', 'Underline', 'BulletedList' ]]
uiColor: "#FCFCFC"
extraPlugins: 'bbcode'
Puis dans un formulaire, charges ckeditor en mode bbcode :
->add('content', 'ckeditor', array (
'label' => 'Contenu',
'config_name' => 'bbcode'
))
Afficher le BBcode
Pour afficher le BBcode, il va falloir le convertir en HTML. Pour celà, un bundle Symfony existe : FMBBCodeBundle.
Regardes la documentation du bundle pour l’installer et le configurer.Attention, il faut utiliser la version 7.* pour Symfony 3 et non la version 6 comme préconisée dans la documentation du bundle
Ce bundle ajoute un filtre twig qui te permet de rendre le BBcode. Exemple :
{{ content | bbcode_filter('default') }}
Et pour que le HTML soit interprété :
{{ content | bbcode_filter('default') | raw }}</pre>
Utiliser un colorateur syntaxique de code intégré à CKEditor
Nous allons voir ici comment utiliser un colorateur de code. J’utilise sur cette page la bibliothèque highligh.js pour colorer le code.
Commençons par installer le plugin pbckcode dans votre fichier config.yml :
ivory_ck_editor:
plugins:
pbckcode:
path: '/bundles/unixeliaapp/ckeditor/pbckcode/'
filename: 'plugin.js'
default_config: my_custom_config
configs:
my_custom_config:
toolbar: ['pbckcode']
extraPlugins: 'pbckcode'
pbckcode: { highlighter : 'HIGHLIGHT', tab_size : '4', theme : 'github', modes : [['Text', 'text'],['HTML', 'html'], ['CSS', 'css'], ['PHP', 'php'], ['JS', 'javascript'], ['YAML', 'yaml'], ['JSON', 'json'], ['SQL', 'sql'], ['Bash', 'bash']], js : "https://cdn.jsdelivr.net//ace/1.1.4/noconflict/" }
Sur votre page d’affichage du contenu, il va falloir ajouter le script highlight.js et l’éxécuter. Exemple :
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.5/styles/default.min.css">
{{ content | raw }}
<script src="//cdn.jsdelivr.net/highlight.js/8.5/highlight.min.js"></script>
<script>
$(document).ready(function() {
$('code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
24 octobre 2015 à 16h49
Bonjour,
Je confirme ce qu’écris Alexx. Impossible de mettre en place un autre skin. J’ai téléchargé le skin office2013 dans web/bundles/ivoryckeditor/skins. Comme Alexx j’ai essayé moult écritures dans le fichier de config sans succès.
8 septembre 2017 à 16h41
Bonjour, J’ai cherché, mais je n’ai pas trouvé :)Comment fais-t-on pour utiliser l’option « required=>true » dans le formulaire ?Car, si on ne remplit pas le textarea de CKEditor dans le formulaire, la base de données pousse un cri :)Exemple :$builder->add(‘question’, CKEditorType::class, array (‘label’ => ‘Default description’, ‘config_name’ => ‘my_custom_config’, ‘required’=>true,’config’ => array(‘language’ => ‘fr’)))Merci par avance
13 juillet 2017 à 16h48
Cet article m’a été d’une grande utilité, merci
4 juillet 2017 à 18h50
Cool l’article :). Merci
13 juin 2017 à 17h46
Mise à jour de l’article
Pour ceux qui rencontre une page blanche à l’utilisation de FMElfinderBundle, la configuration que je présentais fonctionnait uniquement jusqu’à la version 5 du bundle. En passant à la version 6 j’ai aussi rencontré le problème, il faut rajouter un peu de configuration pour prendre en compte les nouvelles dépendances du bundle. Je vous laisse revoir le paragraphe #Installation de FMElfinderBundle.
Merci @severine, j’ai mis à jour pour Symfony 3
7 juin 2017 à 20h54
Article intéressant merci !!!
12 mai 2017 à 8h55
Bonjour,J’ai constaté la même erreur que mouradev et j’ai bien vérifié les assets et les logs apaches (qui ne disent rien). Auriez-vous une autre piste ?Cordialement
7 avril 2017 à 15h25
Merci beaucoup pour le partage !Même si moi personnellement le chemin vers le BBCode était : « /bundles/ivoryckeditor/plugins/bbcode/ » Mais rien de bien sorcier.Cordialement,
31 octobre 2016 à 2h22
J’oubliais. Utilisé cette syntaxe : ->add(‘content’, CKEditorType::class)
31 octobre 2016 à 2h21
Merci Severine. J’ai cherché pendant 4 heures. Ton commentaire m’a bien aidé.Donc sur symfony 3, il faut effectivement installé la version 4. Activer le bundle dans Appkernel.php. en ajoutant la ligne new Ivory\CKEditorBundle\IvoryCKEditorBundle(),Enfin mettre à jour les assets via la commande php bin/console assets:install webJ’espère que ça servira à d’autres.
23 septembre 2016 à 14h59
je bosse sur un projet symfony 2.. j’aimerai configurer dans le yaml le plugin ‘link’ de sorte a ce que le ‘target’ par defaut soit « _blank ».. je n’ai rien trouve dessus. any ideas?
28 août 2016 à 15h59
Bonjour,Je n’ai pas le bouton « Explorer le serveur »? Une idée?Cordialement,
6 juillet 2016 à 11h16
BonjourJe travaille sur symfony 3 et j’ai essayé ce bundle qui ne fonctionne pas quand on l’installe dans sa version 2.0 sans le composer.jsonIl faut l’installer en version 4.0 et ensuite dans le formbuilder ->add(‘content’, CKEditorType::class, [J’espère que ça aidera certains
24 avril 2016 à 11h37
Bonjour,J’ai exactement le même problème que « MouraDev », lorsque je clique sur « Explorer le serveur »une fenêtre vide s’ouvre, seulement la barre d’administration en bas s’affiche, sinon fenêtre blanche (Je travaille en local, je ne sais pas si ça joue..). Avez-vous une idée du problème que ça peut être ?Cordialement.
5 janvier 2016 à 16h21
Bonjour,
Tout d’abord merci beaucoup pour cet article !
J’aimerais utiliser des widget CKEditor dans les stylesSet cependant cela ne fonctionne pas :/
J’ai pourtant suivi ce tutoriel (http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1), mon widget fonctionne bien avec un bouton dans la toolbar (comme expliqué dans l’exemple) mais pas dans la liste des styles, même en ajoutant la configuration affichée dans la doc de IvoryCKEditorBundle (https://github.com/egeloen/IvoryCKEditorBundle/blob/master/Resources/doc/usage.md) :
– { name: « Widget Style », type: widget, widget: « my_widget », attributes: { class: « my_widget_style » }}
Est-ce que quelqu’un aurait une piste ? :/
22 novembre 2015 à 19h21
Bonjour,
Lorsque je clique sur « Explorer le serveur » pour insérer une image, il me retourne une interface vide 🙁
19 avril 2016 à 12h53
@mouradev avez-vous installé les assets après l’installation du bundle FMElfinderBundle ? Avez-vous une erreur dans les logs d’apache ?
24 septembre 2015 à 15h54
reprécision, je n’ai toujours que le textarea qui apparait ….
21 septembre 2015 à 19h33
@gymriin, avez-vous installé les assets après l’installation du bundle ? Si le problème persiste, je vous invite à consulter la documentation officielle : https://github.com/egeloen/IvoryCKEditorBundle
24 septembre 2015 à 15h54
je précise que je suis en symfony 2.7.4 et que j’ai fait toutes les étapes pas à pas, quand je construit mon builder, rien ne se passe ….
24 septembre 2015 à 15h01
argh !!! ne marche pas chez moi !!!
23 juillet 2015 à 13h29
Super tuto, Ckeditor c’est parfois très chiant à mettre en place, mais ce bundle aide carrément.
Par contre j’ai absolument pas réussi à mettre un autre skin.
J’ai pris le skin « icy_orange » que j’ai mis dans « web/bundles/ivoryckeditor/skins », mais impossible de l’appeler, je trouve ce passage super flou.
L’as-tu déjà mis en pratique ? J’ai essayé des écritures différentes, mais sans succès :/