Temps de lecture : 15 minutes environ.
Série : Symfony 7
Fichiers : https://github.com/NouvelleTechno/OpenBlog
Dans ce tutoriel, nous allons voir comment intégrer CKEditor 5 dans une application Symfony 7 pour transformer le champ de texte d’ajout d’article en un éditeur enrichi, permettant ainsi aux utilisateurs de formater facilement leur contenu. Ce processus comprend le téléchargement et la configuration de CKEditor via son Builder, l'intégration des fichiers dans le projet, et la gestion des permissions pour assurer le bon fonctionnement de cet éditeur dans notre environnement.
Téléchargement et configuration de CKEditor
Accéder au Builder CKEditor
Rendez-vous sur ckeditor.com et sélectionnez le Builder pour CKEditor 5.
Choix des options de configuration
Dans la colonne de gauche, choisissez l'éditeur souhaité (ici, nous sélectionnons l'éditeur classique). Ensuite, vous pouvez configurer les options en choisissant les fonctionnalités dont vous avez besoin : options de formatage du texte, polices, tailles, alignements, etc.
Attention : Les options marquées d’une étoile sont des fonctionnalités Premium et nécessitent un paiement. Dans ce tutoriel, nous choisissons uniquement les options gratuites.
Téléchargement de l’éditeur
Sélectionnez la langue (ici, le français) et le format JavaScript self-hosted. Cliquez sur Download Sample pour télécharger un fichier ZIP contenant tous les fichiers de CKEditor configurés.
Installation des fichiers CKEditor dans le projet Symfony
Extraction des fichiers
Extrayez le contenu du fichier ZIP téléchargé. Vous verrez plusieurs fichiers, notamment des fichiers HTML, CSS et JavaScript, ainsi qu’un dossier translations pour la localisation.
Ajout des fichiers au projet
Dans le répertoire de votre projet Symfony, ajoutez un dossier CKEditor sous assets/js. Ensuite, déplacez-y les fichiers ckeditor.js et ckeditor.js.map, ainsi que le dossier translations.
Intégration des fichiers CSS
Placez les fichiers CSS de CKEditor dans le répertoire assets/styles/css.
Déclaration des ressources CSS et JavaScript
Dans le fichier app.js du projet, importez le fichier CSS de CKEditor pour le rendre accessible à l’application. Par exemple :
import './styles/css/ckeditor5.css';
Étape 3 : Initialisation de CKEditor dans le projet
Création d’un fichier d’initialisation
Dans le répertoire assets/js, créez un fichier appelé ckeditor-init.js. Ce fichier contiendra le code pour configurer et lancer CKEditor.
Configuration de CKEditor
Ouvrez le fichier main.js fourni avec CKEditor et copiez le code de configuration par défaut dans votre fichier ckeditor-init.js. Ce code inclut les plugins, les styles de police, les options de formatage, etc., sélectionnés dans le Builder.
Adaptation des chemins et suppression des conflits
Ajustez les chemins des fichiers pour qu’ils correspondent aux emplacements dans votre projet. Par exemple :
import {
ClassicEditor,
AccessibilityHelp,
Alignment,
Autoformat,
Autosave,
BlockQuote,
Bold,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
HorizontalLine,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
SelectAll,
Strikethrough,
TextTransformation,
Underline,
Undo
} from './ckeditor/ckeditor5.js';
import translations from './ckeditor/translations/fr.js';
const editorConfig = {
toolbar: {
items: [
'undo',
'redo',
'|',
'heading',
'|',
'fontSize',
'fontFamily',
'fontColor',
'fontBackgroundColor',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'code',
'|',
'horizontalLine',
'link',
'blockQuote',
'|',
'alignment',
'|',
'outdent',
'indent'
],
shouldNotGroupWhenFull: false
},
plugins: [
AccessibilityHelp,
Alignment,
Autoformat,
Autosave,
BlockQuote,
Bold,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
HorizontalLine,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
SelectAll,
Strikethrough,
TextTransformation,
Underline,
Undo
],
fontFamily: {
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
heading: {
options: [
{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph'
},
{
model: 'heading1',
view: 'h1',
title: 'Heading 1',
class: 'ck-heading_heading1'
},
{
model: 'heading2',
view: 'h2',
title: 'Heading 2',
class: 'ck-heading_heading2'
},
{
model: 'heading3',
view: 'h3',
title: 'Heading 3',
class: 'ck-heading_heading3'
},
{
model: 'heading4',
view: 'h4',
title: 'Heading 4',
class: 'ck-heading_heading4'
},
{
model: 'heading5',
view: 'h5',
title: 'Heading 5',
class: 'ck-heading_heading5'
},
{
model: 'heading6',
view: 'h6',
title: 'Heading 6',
class: 'ck-heading_heading6'
}
]
},
language: 'fr',
link: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
decorators: {
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
placeholder: 'Entrez ici votre article',
translations: [translations]
};
const editorField = document.querySelector('#add_post_form_content');
ClassicEditor.create(editorField, editorConfig)
.then(newEditor => {
newEditor.model.document.on("change", function(){
const editorData = newEditor.getData();
editorField.value = editorData;
})
})
.catch(err => {
console.error(err.stack)
});Supprimez les éléments conflictuels ou inutiles, notamment certaines options de CKEditor qui peuvent être incompatibles avec votre projet.
Résolution des erreurs de permission
Des erreurs de permission peuvent apparaître en raison des restrictions liées au dossier translations. Pour régler cela, accédez à votre conteneur Docker PHP et attribuez les bonnes permissions :
docker-compose exec php chmod 755 /path/to/translations
Intégration de l’éditeur CKEditor dans les formulaires
Gestion des erreurs de validation
CKEditor masque l’élément textarea d’origine, ce qui peut provoquer des erreurs si le champ est requis. Pour éviter cela, écoutez les changements de CKEditor et mettez à jour le champ caché :
newEditor.model.document.on('change:data', () => {
editorField.value = newEditor.getData();
});Conclusion
Nous avons maintenant intégré CKEditor 5 à notre projet Symfony 7. Cette configuration initiale permet de transformer un champ de texte en éditeur enrichi, offrant aux utilisateurs une grande flexibilité de formatage. Dans les prochains tutoriels, nous aborderons l’ajout de fonctionnalités avancées telles que le téléchargement d’images et la personnalisation des styles CSS.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
