CodeSource : Pourquoi et comment j'ai intégré CodeMirror 6 dans TinyMCE 7

Tous ceux qui ont déjà dû basculer en mode « Code source » dans TinyMCE connaissent ce sentiment d'austérité : une modale dépouillée, un simple bloc de texte noir sur blanc sans coloration syntaxique, et un code HTML souvent minifié et compacté difficile à relire.

Dans le cadre du développement de Magix CMS 4, je souhaitais offrir une expérience d'édition irréprochable. Or, avec l'arrivée de TinyMCE 7, la quasi-totalité des anciens plugins tiers basés sur CodeMirror 5 ou Ace sont devenus obsolètes ou incompatibles avec les nouvelles APIs de l'éditeur. J'ai donc développé CodeSource, une extension moderne propulsée par CodeMirror 6, que j'ai choisi de publier librement en Open Source (GPLv3) pour l'ensemble des développeurs.

Un défi technique : dompter l'isolation et le CSS

Développer un plugin pour TinyMCE 7 avec la dernière génération de CodeMirror 6 a soulevé plusieurs défis techniques stimulants :

• Zéro dépendance serveur : Je voulais un bundle JavaScript autonome, compilé proprement via esbuild, distribuable sous forme de script statique prêt à l'emploi. Le plugin fonctionne ainsi sur n'importe quel hébergement (mutualisé, VPS, stack PHP classique) sans aucun runtime Node.js requis en production.

• L'isolation par Shadow DOM : TinyMCE applique des règles CSS globales particulièrement agressives au sein de ses fenêtres modales (.tox-dialog), écrasant les styles de coloration syntaxique. Pour neutraliser ces interférences sans surcharger les feuilles de style de hacks fragiles, j'ai encapsulé l'instance CodeMirror dans un Shadow DOM. Le thème sombre (OneDark) s'exprime ainsi dans une bulle étanche, parfaitement respectée par le navigateur.

• L'auto-indentation à la volée : TinyMCE restitue nativement un flux HTML condensé. CodeSource intègre un formateur léger qui réorganise, indente et aère le code dès l'ouverture de la modale, offrant une lisibilité immédiate des balises et attributs.

• Recherche et remplacement intégrés : Une barre d'outils dédiée permet de rechercher des chaînes de caractères, des balises ou des sélecteurs, accessible à la souris ou via les raccourcis natifs Ctrl + F / Cmd + F.

Un outil universel pour tous les projets

Si CodeSource constitue le moteur de code natif de la future version de mon propre CMS, il a été conçu dès le premier jour comme un composant universel et agnostique.

Que vous utilisiez TinyMCE 7 sur un projet sur-mesure, une application SaaS, WordPress ou n'importe quel autre back-office web, le plugin s'intègre en quelques secondes dans la configuration standard de votre éditeur :

tinymce.init({
    selector: "textarea",
    plugins: "... codesource",
    toolbar: "... | codesource"
});

Contribuer à l'Open Source fait partie intégrante de ma vision du développement web depuis de nombreuses années. Partager ce type d'outillage permet d'élever collectivement la qualité de nos interfaces d'administration.

Tester et contribuer au projet

Le code source complet, la documentation d'installation et les fichiers minifiés sont hébergés publiquement sur GitHub :

• Dépôt GitHub : github.com/gtraxx/tinymce-codesource

• Licence : GNU General Public License v3.0

N'hésitez pas à tester le plugin sur vos intégrations, à remonter vos retours ou à soumettre vos pull requests !