Symfony : Editeur WIZIWIG CKEditor avec IvoryCKEdirorBundle

CKEditor Symfony

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.

Interface CKEditor

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 :

Gestionnaire de média

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 ….

  • 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.

  • Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *