Tutoriel : Intégrer CKEditor avec Symfony2

Elliott Chiaradia |03-12-2015

CKEditor est un web text editor. Il faut entendre par là qu’il permet de rajouter du contenu de manière user-friendly sans devoir taper du code html dans notre textarea. Une image vaut mille mots, voici donc à quoi peut ressembler un champ de type CKEditor :

Nous pourrions très bien configurer CKEditor de manière entièrement manuelle. Cependant, puisque nous sommes sur Symfony2, pourquoi ne pas profiter de bundles déjà existants et faisant très bien le job ?

Nous allons utiliser le bundle IvoryCKEditorBundle. Si vous voulez utiliser un autre bundle, il y en a plusieurs, comme TrsteelCkeditorBundle par exemple, qui fonctionne aussi très bien d'après ce que j'ai pu lire. Par contre, dans ce tuto nous allons nous focaliser sur IvoryCKEditorBundle.

1. Installation de IvoryCKEditorBundle

Pour installer IvoryCKEditorBundle, vous devez ouvrir le fichier composer.json et rajouter la ligne suivante :

"require": {
            …
            "egeloen/ckeditor-bundle": "~2.0"
            }

Ouvrez le fichier app/AppKernel.php puis rajouter la ligne suivante

$bundles = array(
            …
            new Ivory\CKEditorBundle\IvoryCKEditorBundle(),
) ;

Il ne vous reste plus qu’à effectuer la commande suivante dans votre invite de commande pour que le bundle soit installé !

composer update egeloen/ckeditor-bundle

2. Configuration de IvoryCKEditorBundle

La configuration se fait via le fichier config.yml se trouvant dans le répertoire app/config

Il vous suffit de rajouter le code suivant à la fin du fichier.

ivory_ck_editor:
    default_config: default
    configs:
        default:

La configuration que nous avons créée s’appelle "default", nous pouvons bien évidemment la personnaliser en rajoutant à la suite divers paramètres. En voici quelques-uns.

toolbar : Permet de personnaliser la barre d’outils. Si par exemple j’aimerais avoir comme outil uniquement le bouton permettant d’afficher les sources, alors j’écrirais toolbar : [‘Source’]
uiColor : Permet de personnaliser la couleur de fond de l’interface
height : Permet de définir une hauteur par défaut

Si la personnalisation vous intéresse, je ne peux que vous conseiller d’aller jeter un œil à la documentation.

Exemple d’une configuration avec toolbar et couleur personnalisée :

    configs:
        default:
          toolbar:                [ [ "Source", "-", "Save" ], "/", [ "Anchor" ], "/", [ "Maximize" ] ]
            uiColor:                "#000000"

Pour remplacer un textarea d’un de vos formulaire, il vous suffit d’ajouter un contenu de type « ckeditor ».

$builder
            …
            ->add('content', 'ckeditor')
…

3. Ajouter des plugins

Passons aux choses sérieuses : l’ajout de plugins. Car oui, CKEditor est déjà fourni avec une multitude d’outils, mais il en manque certains que je trouve vraiment indispensables.

Dans votre dossier web, créez un répertoire nommé « ckeditor », puis à l’intérieur un répertoire « plugins », c’est ici que nous stockerons les différents plugins.

Vous devez maintenant télécharger un ou plusieurs plugins. Ceux-ci sont répertoriés sur le site de CKEditor. Cependant il faut faire attention. Car la dernière version actuelle de IvoryCKEditorBundle n’utilise pas la version 4.5 de CKEditor mais bel et bien la version 4.4. Vous devez donc télécharger les versions de plugins qui sont compatibles avec la version 4.4.

Voici une petite liste de plugins que je trouve intéressant d’implémenter (ils ont tous une version compatible pour CKEditor 4.4) :

codesnippet : Permet d’écrire des blocs de code, indispensable pour un blog contenant des tutoriels par exemple !
image2 : Permet de centrer les images.
youtube : Permet de rajouter des vidéos youtube à votre contenu.
widget : Obligatoire pour le bon fonctionnement de codesnippet et de image2
lineutils : Obligatoire pour le bon fonctionnement de widget et donc de codesnippet et de image2.

Après avoir téléchargé un des plugins (dans notre exemple nous allons rajouter le plugin Youtube, permettant comme son nom l'indique, d'intégrer des vidéos youtube dans votre contenu). Rendez-vous dans le fichier app/config/config.yml et modifiez le comme-ceci.

ivory_ck_editor:
    plugins:
        youtube:
            path:                       '/ckeditor/plugins/youtube/'
            filename:                   'plugin.js'
    default_config: default
    configs:
        default:
             extraPlugins: 'youtube’

Si vous voulez rajouter plusieurs plugins, faites-le comme ceci :

youtube:
            path:                       '/ckeditor/plugins/youtube/'
            filename:                   'plugin.js'

lineutils:
            path:                       '/ckeditor/plugins/lineutils/'
            filename:                   'plugin.js'

N'oubliez pas dans votre configuration personnalisée de rajouter les plugins supplémentaires !

extraPlugins: 'youtube,lineutils’

Si à l'affichage de votre formulaire contenant un champ de type ckeditor vous avez une erreur, je ne peux que vous conseiller d’examiner le code et de vérifier si le path est correct. Si vous voyez l’erreur suivante : Uncaught TypeError: CKEDITOR.tools.getIndex is not a function.

C’est qu’il y a de fortes chances que vous utilisez un plugin créé pour la version 4.5 de CKEditor.

Conclusion

Vous êtes dorénavant capable d'intégrer CKEditor à vos projets Symfony2 ! Pour aller plus loin, je ne peux que vous inviter à lire mes autres tutoriels sur le sujet.

Série CKEditor et Symfony2 :

Intégrer CKEditor avec Symfony2
Ajouter un gestionnaire de fichiers à CKEditor avec Symfony2
Intégrer un colorateur syntaxique