Lors de la migration de mes projets vers les dernières versions de TinyMCE (V6 et V7+), j'ai été confronté à un changement de stratégie de l'éditeur : le retrait du célèbre plugin template de l'offre Open Source. Pour beaucoup de mes développements, et notamment pour Magix CMS, cette fonctionnalité est essentielle pour permettre aux utilisateurs d'insérer des structures HTML complexes sans toucher à une ligne de code.
Plutôt que de me résigner ou d'opter pour une solution lourde, j'ai pris l'initiative de développer Snippets.
Mon objectif était double :
-
Maintenir une continuité de service pour mes utilisateurs habitués aux modèles de mise en page.
-
Partager avec la communauté une alternative légère, moderne et conforme aux nouvelles APIs de dialogue de l'éditeur.
Développer ce plugin a été l'occasion de plonger dans les subtilités de l'API de TinyMCE 7. J'ai choisi de rendre ce code générique et de le publier sur GitHub. C’est ma manière de contribuer à un web ouvert où la facilité de création de contenu ne devrait pas être limitée par des changements de licence.
Je vous invite à découvrir le projet sur mon GitHub. Que vous soyez en pleine migration ou que vous cherchiez simplement à enrichir votre éditeur, ce plugin est fait pour vous.
tinymce.init({
selector: '.mceEditor',
plugins: 'snippets ...',
toolbar: 'snippets | ...',
// Obligatoire : URL retournant la liste des modèles au format JSON
snippets_url: '/votre-api/get-snippets.php',
// Requis pour l'aperçu fidèle
content_css: '/css/votre-style.css',
license_key: 'gpl'
});Un exemple d'utilisation de snippets tinyMCE
snippets_list: [
{ text: 'Témoignage Client', value: '<blockquote class="magix-quote"><p>"Votre texte ici"</p><cite>Nom du client</cite></blockquote>' },
{ text: 'Grille 3 colonnes', value: '<div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div></div>' },
{ text: 'Bouton Action', value: '<a href="#" class="magix-btn">Cliquez ici</a>' }
]