Comment associer CKEditor et Symfony ?

Publié le

Comment associer CKEditor et Symfony ?

1 - Présentation 

Nous allons voir ensemble comment intégrer un éditeur visuel à votre projet Symfony. Un éditeur visuel est une interface utilisateur qui permet d'avoir un rendu direct du formatage d'un texte, dans notre cas, du HTML. Ce type d'interface est appelée WYSIWYG, (What You See Is What You Get, littéralement : ce que vous voyez est ce que vous obtenez). Avec un tel outil, vous vous retrouvez avec une zone de texte équipée d'une barre d'outils semblable à celle de votre logiciel de traitement de texte. Cela facilite grandement la rédaction de texte au format HTML. Il existe plusieurs éditeurs de ce type, mais nous allons aujourd'hui voir CKEditor et son intégration au sein d'un projet Symfony.

2 - Installation 

Pour intégrer CKEditor nous allons passer par l'excellent IvoryCKEditorBundle.C'est un bundle Symfony qui vous permettra d'utiliser CKEditor grâce à un nouveau type de formulaire.

// Versions antérieures à Symfony 2.7 
$builder->add('field', 'ckeditor');

// Versions supérieures à Symfony 2.8 
$builder->add('field', CKEditorType::class);

Pour commencer, installez le bundle grâce à la commande require de composer.

composer require egeloen/ckeditor-bundle

Enregistrez ensuite votre bundle en ajoutant cette ligne à votre Kernel.

// app/AppKernel.php
new Ivory\CKEditorBundle\IvoryCKEditorBundle(),

Il faut ensuite installer les assets pour CKEditor, cette commande copie simplement les fichiers javascript et css dans le dossier public afin que les ressources puissent êtres chargées par le navigateur.

php bin/console assets:install web

Et Voilà ! Rendez-vous dans le prochain chapitre afin de découvrir l'utilisation de ce bundle.

3 - Utilisation 

Vous n'êtes pas sans savoir que CKEditor dispose d'une quantité de paramètres gigantesque. Les possibilités de configuration sont grandes et les modules complémentaire nombreux. Nous allons voir ici comment configurer une version simple et minimaliste.

// app/config/config.yml

ivory_ck_editor:
    configs:
        full_config:
            jquery: true
            height: '900px'
            language: fr
            filebrowserBrowseRoute: elfinder
            filebrowserBrowseRouteParameters: []
            extraPlugins: 'lineutils,widget,dialog,codesnippet,widgetselection'
        basic_config:
            jquery: true
            heihgt: '250px'
            language: fr
            toolbar: basic

Vous constatez ici que nous avons défini deux configurations full_config et basic_config. La première configuration est plus complète, elle active la barre d'outils complète de l'éditeur, dispose d'un gestionnaire d'upload, d'un colorateur syntaxique etc..
Pour la basic_config, nous avons défini la langue française, une hauteur de 250px et la toolbar basic. Pas de panique nous détaillerons l'utilisation des composants de la configuration complète plus tard. 

Pour utiliser CKEditor dans un formulaire, il suffit d'éditer votre formBuilder de la sorte, en spécifiant votre configuration.

$builder->add('field', 'ckeditor', array('config_name' => 'basic_config',));

4 - Aller plus loin

Nombreux sont les usages de CKEditor, en voici une liste non exhaustive. 

  • Gestionnaire de fichier
  • Colorateur syntaxique de code
  • Utilisation de skin
  • Intégration de YouTube
  • Affichage des grilles Bootstrap.

Pour découvrir et utiliser ces fonctions je vous invite à lire la documentation officielle et à visiter le site de CKEditor.