Petit rappel avant de commencer :

TinyMCE est un éditeur de contenu WYSIWYG très répandu et surtout très utile ! Il permet lorsqu’on dispose d’un CMS d’éditer du contenu et surtout de le mettre en forme, un peu à la manière d’un logiciel traitement de texte.

Si comme moi vous utilisez cet éditeur couramment dans vos  projets web, il vous est probablement arrivé de devoir passer par l’éditeur HTML pour faire des mises en page un peu plus complexes que celles proposées de base dans l’outil.

Cette fonctionnalité, bien que très pratique manque cruellement d’ergonomie, pas de coloration syntaxique, pas d’indentation, si bien que si vous concevez l’intégralité d’un page web via cet éditeur, se retrouver dans le code écris devient vite très compliqué.

Pour cela, un développeur, prénommé Josh Lobe a créé un plugin fortement utile : codemagic !

L’installation est on ne peut plus simple, on télécharge ici.

Il suffit ensuite de décompresser l’archive et copier/coller le dossier entier dans le répertoire tinymce/plugins de votre installation.

Pour finir, il ne reste qu’à ajouter codemagic dans l’initialisation de votre tinyMCE :


tinymce.init({
    selector: "textareas",
    plugins: [ "codemagic" ],
    toolbar: "codemagic"
});

Et voilà ! Votre tinyMCE se transforme en éditeur html avancé ! Il suffit de cliquer dans l’icone codemagic de votre tinyMCE pour en profiter !

 

Coloration syntaxique pour TinyMCE
Taggé sur :

Laisser un commentaire