CodeSource : L'éditeur HTML avancé

Intégré nativement dans l'éditeur WYSIWYG (TinyMCE 7) de Magix CMS 4, CodeSource remplace la vue source standard par un environnement de développement complet propulsé par CodeMirror 6. Il permet d'éditer directement le code HTML des pages, actualités et fiches produits avec le confort visuel d'un véritable IDE.

Ce que fait CodeSource

Contrairement à la fenêtre de code source basique qui affiche un bloc de texte brut et condensé, CodeSource apporte plusieurs optimisations majeures :

• Coloration syntaxique OneDark : Les balises HTML, attributs, valeurs et textes disposent d'un contraste visuel immédiat pour repérer instantanément la structure de vos éléments.

• Auto-indentation (Beautifier) : Dès l'ouverture de la fenêtre, le code HTML minifié généré par l'éditeur visuel est automatiquement nettoyé, aéré et indenté sur 2 espaces réels.

• Isolation complète par Shadow DOM : Le moteur de code s'exécute dans une bulle étanche. Les styles CSS internes de TinyMCE ou du thème d'administration n'interfèrent jamais avec la lisibilité du code.

• Moteur de recherche et remplacement : Vous pouvez localiser une classe CSS, un sélecteur ou remplacer une chaîne de caractères directement dans la modale sans outil externe.

• Numérotation des lignes : Facilite le repérage et la correction des balises imbriquées complexes.

Comment l'utiliser au quotidien

L'outil étant préconfiguré d'office dans l'administration de Magix CMS 4, aucune manipulation technique n'est requise.

1. Ouvrir l'éditeur de code

Dans la barre d'outils de TinyMCE, cliquez sur l'icône CodeSource (généralement représentée par les chevrons de balises < >). La fenêtre modale s'ouvre avec votre contenu HTML formaté et coloré.

2. Éditer et naviguer

• Saisie assistée : Modifiez vos balises, insérez vos attributs personnalisés (data-*, classes utilitaires Bootstrap/CSS) ou collez des fragments de code HTML bruts.

• Numérotation et sélection : Cliquez sur les numéros de ligne pour sélectionner des blocs complets et conserver vos repères visuels.

3. Rechercher et remplacer du texte

Pour naviguer rapidement dans des contenus volumineux :

• Pressez Ctrl + F (Windows/Linux) ou Cmd + F (macOS) pour afficher la barre de recherche intégrée.

• Saisissez votre terme pour voir toutes les occurrences mises en surbrillance.

• Utilisez les commandes de remplacement pour modifier plusieurs balises ou classes en un seul clic.

4. Sauvegarder les modifications

Une fois vos ajustements terminés :

• Cliquez sur le bouton Enregistrer au bas de la modale.

• Le code source nettoyé et réorganisé est immédiatement réinjecté dans l'éditeur visuel TinyMCE, prêt pour la publication ou l'aperçu. Si vous souhaitez annuler vos modifications, fermez simplement la modale via le bouton Annuler ou la croix de fermeture.