Intégrer un éditeur WYSIWYG dans Symfony 6 (CKEditor)
Publié le 30 novembre 2022
Intégrer un éditeur WYSIWYG (What You See Is What You Get) dans un projet Symfony est quelque chose de relativement simple.
Nous utiliserons ici la librairie CKEditor qui répond parfaitement à ce besoin, nous verrons comment l'intégrer dans un simple formulaire ou encore dans EasyAdmin.
Aussi, nous verrons comment configurer la barre d'outil de l'éditeur, en utilisant des presets ou encore des plugins que nous propose le builder online de CKEditor.
Installation du bundle CKEditor
Installation du bundle Symfony CKEditor depuis composer :
composer require friendsofsymfony/ckeditor-bundle
Assurez-vous que le bundle est bien inscrit dans le fichier bundles.php
, sinon rajoutez-le :
<?php
return [
// ...
FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],
];
Il faut ensuite télécharger la dernière version de CKEditor à l'aide d'une commande du bundle Symfony :
php bin/console ckeditor:install
Puis pour finir il faut envoyer CKEditor (le dossier installé précédemment qui contient tous les assets) dans le dossier public
de notre projet Symfony :
php bin/console assets:install public
Intégration de CKEditor dans un formulaire classique
Pour obtenir l'éditeur dans un formulaire, il suffit de créer un nouveau champ avec le type CKEditorType
:
<?php
namespace App\Form\Type;
use FOS\CKEditorBundle\Form\Type\CKEditorType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
class PostEditType extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('title', TextType::class, [
'label' => 'Titre',
])
->add('content', CKEditorType::class)
->add('submit', SubmitType::class, [
'label' => 'Envoyer',
]);
}
}
Chargez ce formulaire et vous devriez voir apparaître votre nouvel éditeur WYSIWYG !
Intégration de CKEditor dans EasyAdmin
Si vous utilisez un backoffice EasyAdmin, l'intégration de l'éditeur peut se faire de la façon suivante :
<?php
// ...
use FOS\CKEditorBundle\Form\Type\CKEditorType;
// ...
class PostCrudController extends AbstractPostTypeCrudController
{
// ...
public function configureFields(string $pageName): iterable
{
return [
// ...
TextEditorField::new('content', 'Contenu')->setFormType(CKEditorType::class),
// ...
];
}
}
Configuration de CKEditor
Lors de votre premier affichage de l'éditeur, vous remarquerez que la barre d'outil est très chargée. Peut-être trop chargée !
La largeur, la hauteur ou encore d'autres paramètres de l'éditeur peuvent ne pas vous convenir.
Naturellement, une configuration est possible pour que vous soyez en confort avec votre nouvel éditeur et c'est ce que ce nous allons voir dans cette section.
Nous travaillerons dans le fichier config/packages/fos_ckeditor.yaml
.
Configuration de la barre d'outil
Pour une configuration simple et rapide, des presets de la barre d'outil comme basic
, standard
ou encore full
peuvent être appliqués comme suit :
# config/packages/fos_ckeditor.yaml
fos_ck_editor:
configs:
main_config:
toolbar: standard
Mais vous voudrez surement ajuster vous-même votre configuration outil par outil.
Petit cadeau, voici la configuration de barre d'outil que j'utilise personnellement sur hugoderre.com :
# config/packages/fos_ckeditor.yaml
fos_ck_editor:
configs:
main_config:
allowedContent: true # Désactive le filtrage dans le code source, par exemple sur l'ajout de propriété HTML
height: 850 # Hauteur
width: 1000 # Largeur
toolbar:
- {
name: "styles",
items:
[
"Bold",
"Italic",
"Underline",
"Strike",
"CodeSnippet",
"Code",
"Blockquote",
"-",
"Link",
"-",
"RemoveFormat",
"NumberedList",
"BulletedList",
"-",
"Outdent",
"Indent",
"-",
"-",
"JustifyLeft",
"JustifyCenter",
"JustifyRight",
"JustifyBlock",
"-",
"Image",
"Table",
"-",
"TextColor",
"BGColor",
"HorizontalRule",
"/",
"Styles", "Format", "Font", "FontSize", "Source",
]
}
À savoir que CodeSnippet et Code sont des plugins CKEditor, une configuration
Personnellement il y a tout ce dont j'ai besoin pour écrire mes articles, un vrai bonheur au quotidien. Libre à vous d'ajouter ou de retirer des éléments !
Ajout de plugins CKEditor
Dans la section précédente, nous avons vu que certains composants de la barre d'outils, comme CodeSnippet et Code,
CodeSnippet permet d'écrire des blocs de code directement dans notre éditeur. Son implémentation par défaut intègre la librairie highlight.js. Si vous souhaitez que la colorisation syntaxique de highlight.js soit visible autre part que dans le rendu visuel de CKEditor alors vous devrez y importer vous même la librairie, si cela vous intéresse j'ai déjà écris un article sur l'intégration de highlight.js.
console.log('Extrait de code écrit depuis le plugin CodeSnippet !')
CodeTag permet d'encadrer des mots s'apparentant à du code => console.log('Comme cela')
.
Nous allons voir ici comment rajouter ces deux éléments dans notre barre d'outil grâce aux plugins :
- CKEditor dispose d'un builder online qui permet de recréer un package contenant tous les plugins que vous aurez décidé d'y installer. Créez donc un nouveau package CKEditor au format
full
et en y ajoutant les plugins CodeSnippet et CodeTag. - Une fois le fichier zip téléchargé, vous devez y extraire le dossier
ckeditor
dans votre projet Symfony dans le dossierpublic/bundles
. - Enfin, vous devez indiquer à votre fichier de configuration
fos_ckeditor.yaml
le chemin relatif vers le nouveau dossierckeditor
fraichement installé :
# config/packages/fos_ckeditor.yaml
fos_ck_editor:
base_path: "bundles/ckeditor"
js_path: "bundles/ckeditor/ckeditor.js"
12 commentaires
kasali
Amine
alpha
Gumbraise
raditz
fecou
kasali
yann
raahx
Hugo Derré
raditz
Hugo Derré