Symfony : Editeur WIZIWIG CKEditor avec IvoryCKEdirorBundle
Attention, cet article est obsolète et ce tuto est rédigé pour Symfony 2, je te conseille d’utiliser maintenant ckeditor-bundle.
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
composer.json
{ "require": { "egeloen/ckeditor-bundle": "4.*", } }
app/AppKernel.php
$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
config.yml
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
composer.json
{ "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 } }
app/AppKernel.php
$bundles = array( // ... new FM\ElfinderBundle\FMElfinderBundle(), );
app/config/routing.yml
elfinder: resource: "@FMElfinderBundle/Resources/config/routing.yml"
Configuration
config.yml
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 }}
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>
Commentaire (22)
Alexx| 23 juillet 2015
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 :/
gymriin| 24 septembre 2015
argh !!! ne marche pas chez moi !!!
gymriin| 24 septembre 2015
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 ….
gymriin| 24 septembre 2015
reprécision, je n’ai toujours que le textarea qui apparait ….
Rémi| 21 septembre 2015
@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
mouradev| 22 novembre 2015
Bonjour,
Lorsque je clique sur « Explorer le serveur » pour insérer une image, il me retourne une interface vide 🙁
Rémi| 19 avril 2016
@mouradev avez-vous installé les assets après l’installation du bundle FMElfinderBundle ? Avez-vous une erreur dans les logs d’apache ?
Killian| 5 janvier 2016
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 ? :/
Thomas| 24 avril 2016
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.
severine| 6 juillet 2016
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
davidtimes| 28 août 2016
Bonjour,Je n’ai pas le bouton « Explorer le serveur »? Une idée?Cordialement,
jp| 23 septembre 2016
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?
Djazair| 31 octobre 2016
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.
Djazair| 31 octobre 2016
J’oubliais. Utilisé cette syntaxe : ->add(‘content’, CKEditorType::class)
Webmy| 7 avril 2017
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,
Wilo| 12 mai 2017
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
yra| 7 juin 2017
Article intéressant merci !!!
Rémi| 13 juin 2017
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
Ed| 4 juillet 2017
Cool l’article :). Merci
Thomas| 13 juillet 2017
Cet article m’a été d’une grande utilité, merci
cretthie| 8 septembre 2017
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
loicGr| 24 octobre 2015
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.