Symfony 2 : Editeur WIZIWIG CKEditor avec IvoryCkeditorBundle

Symfony 2 : Editeur WIZIWIG CKEditor avec IvoryCkeditorBundle
28 Juin 2015


CKEditor est un éditeur WIZIWIG(What you see is what you get). Il est facilement personnalisable et de nombreux plugins sont disponibles.

CKEditor

Interface CKEdiror

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'oubliez 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',
))

Vous pouvez 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échargez un skin sur le site officiel et ajoutez-le dans un répertoire public (dans /web/bundles/...)

Vous pouvez 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/"

 

Personnalisez 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"

Vous pouvez aussi personnaliser vous-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' ] ]

 

Exemple :

CKEditor toolbar

 

Vous pouvez ajouter ou enlever des boutons à souhait. Retrouvez 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échargez un plugin sur le site de CKEditor et ajoutez-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

Consultez 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 vous pourrez 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. Cliquez sur ajouter une image et sur Explorer le serveur.

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, chargez 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.

Regardez la documentation du bundle pour l'installer et le configurer.

Ce bundle ajoute un filtre twig qui vous 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/" }

Résultat :

PBCKCODE

 

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>

 

Commentaires

cretthie
08 Septembre 2017 16:41

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

Thomas
13 Juillet 2017 16:48

Cet article m'a été d'une grande utilité, merci

Ed
04 Juillet 2017 18:50

Cool l'article :). Merci

Rémi POIGNON admin
13 Juin 2017 17:46

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

yra
07 Juin 2017 20:54

Article intéressant merci !!!

Wilo
12 Mai 2017 08:55

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

Webmy
07 Avril 2017 15:25

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,

Djazair
31 Octobre 2016 02:22

J'oubliais. Utilisé cette syntaxe :

->add('content', CKEditorType::class)

Djazair
31 Octobre 2016 02:21

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 web

J'espère que ça servira à d'autres.

jp
23 Septembre 2016 14:59

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?

davidtimes
28 Août 2016 15:59

Bonjour,

Je n'ai pas le bouton "Explorer le serveur"? Une idée?

Cordialement,

severine
06 Juillet 2016 11:16

Bonjour
Je 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.json
Il faut l'installer en version 4.0 et ensuite dans le formbuilder
->add('content', CKEditorType::class, [

J'espère que ça aidera certains

Thomas
24 Avril 2016 11:37

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.

Rémi POIGNON admin
19 Avril 2016 12:53

#mouradev avez-vous installé les assets après l'installation du bundle FMElfinderBundle ? Avez-vous une erreur dans les logs d'apache ?

Killian
05 Janvier 2016 16:21

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 ? :/

mouradev
22 Novembre 2015 19:21

Bonjour,
Lorsque je clique sur "Explorer le serveur" pour insérer une image, il me retourne une interface vide :(

loicGr
24 Octobre 2015 16:49

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.

Rémi POIGNON admin
21 Octobre 2015 19:33

#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

gymriin
24 Septembre 2015 15:54

reprécision, je n'ai toujours que le textarea qui apparait ....

gymriin
24 Septembre 2015 15:05

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 15:01

argh !!! ne marche pas chez moi !!!

Alexx
23 Juillet 2015 13:29

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 :/