Aller au contenu principal

TinyMCE avec Symfony

TinyMCE est un éditeur WYSIWYG très populaire et bien intégré à Symfony.

Pour découvrir TinyMCE, vous pouvez consulter le tutoriel Tiny MCE

1. Installation​

1.1) Ajoutez le bundle à votre projet via Composer :​

composer require emileperron/tinymce-bundle

1.2) Installer les assets :​

php bin/console assets:install

2. Intégration dans un formulaire​

Pour utiliser TinyMCE dans vos formulaires Symfony, utilisez le type de champ TinymceType :

use EmilePerron\TinymceBundle\Form\Type\TinymceType;

$builder->add('content', TinymceType::class, []);

3. Utilisation dans un template​

  1. Ouvrir le fichier base.html.twig :

    • Ce fichier se trouve généralement dans le répertoire templates.

  2. Ajouter le script TinyMCE :

    • Ajoutez la ligne suivante dans la section <head> ou juste avant la fermeture de la balise </body> :
<script src="{{ asset('tinymce/js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
  1. Initialiser TinyMCE :
    • Ajoutez le code d'initialisation de TinyMCE pour cibler les champs textarea que vous souhaitez transformer en éditeurs :
<script>
  tinymce.init({
    selector: 'textarea.tinymce',
    license_key: 'gpl',
    plugins: 'lists link image preview',
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    menubar: false
  });
</script>

4. Utiliser le filtre raw Twig​

Lorsque vous utilisez TinyMCE pour gérer du contenu enrichi, ce contenu est généralement stocké sous forme de HTML dans votre base de données.

Pour afficher ce contenu correctement dans vos templates Twig, vous devez utiliser le filtre raw.

Pourquoi utiliser le filtre raw ?​

Par défaut, Twig échappe toutes les variables pour éviter les failles de sécurité comme les injections de code. Cela signifie que si vous affichez directement du contenu HTML sans utiliser raw, le HTML sera affiché comme du texte brut, et les balises ne seront pas interprétées.

Comment utiliser le filtre raw ?​

Voici comment vous pouvez afficher du contenu HTML stocké dans une variable (par exemple, message.content) dans votre template Twig :

{{ message.content|raw }}

Précautions de sécurité​

  • Validation et Nettoyage : Assurez-vous que le contenu HTML est propre et validé avant de l'afficher. Vous pouvez utiliser des bibliothèques comme HTMLPurifier pour nettoyer le contenu lors de l'enregistrement.
  • Confiance : Utilisez raw uniquement pour le contenu provenant de sources de confiance, car cela désactive l'échappement de Twig et pourrait exposer votre application à des vulnérabilités XSS (Cross-Site Scripting) si le contenu n'est pas sécurisé.

En résumé, le filtre raw est essentiel pour afficher correctement le contenu enrichi généré par TinyMCE, mais il doit être utilisé avec précaution pour maintenir la sécurité de votre application.

5. Contrôler l'affichage de chaque champ​

Si vous souhaitez personnaliser l'affichage de chaque champ d'un formulaire dans Twig, vous devez remplacer l'utilisation de :

  • form_widget(form)

par :

  • des appels individuels à form_row(form.champ)

pour chaque champ de votre formulaire.

Cela vous permet de contrôler l'affichage de chaque champ séparément.

Supposons que votre formulaire ait les champs nom, email, et message.

Vous pouvez remplacer le code par :

{{ form_start(form) }}
    {{ form_row(form.nom) }}
    {{ form_row(form.email) }}
    {{ form_row(form.message) }}
    <button class="btn">{{ button_label|default('Save') }}</button>
{{ form_end(form) }}

Explications :​

  • form_start(form) : Démarre le formulaire.
  • form_row(form.nom) : Affiche le champ nom avec son label et ses erreurs.
  • form_row(form.email) : Affiche le champ email de la même manière.
  • form_row(form.message) : Affiche le champ message.
  • form_end(form) : Termine le formulaire.
  • button_label|default('Save') : Utilise Save comme texte par défaut pour le bouton si button_label n'est pas défini.

En utilisant form_row, vous pouvez également ajouter des classes CSS ou des attributs supplémentaires à chaque champ si nécessaire. Par exemple :

{{ form_row(form.nom, {'attr': {'class': 'form-control'}}) }}

Cela vous permet de styliser chaque champ individuellement.

Si cela ne marche pas !

Copier les assets​

Copiez les fichiers présents dans vendor/emileperron/tinymce-bundle/public vers assets/bundles/tinymce/

ou

  1. Accédez au site de téléchargement :

  2. Téléchargez TinyMCE :

    • Cliquez sur le bouton de téléchargement, dans la partie Download TinyMCE Community, pour obtenir la version auto-hébergée de TinyMCE.

  3. Extraire le fichier :

    • Une fois le téléchargement terminé, extrayez le contenu du fichier ZIP.

  4. Copier le dossier tinymce :

    • Trouvez le dossier tinymce dans le dossier extrait.
    • Copiez ce dossier dans le répertoire public/ de votre projet Symfony.