Créer et mettre en forme du contenu HTML ne devrait pas obliger à intégrer un framework complet ou un éditeur excessivement complexe. C’est à partir de ce constat que j’ai développé Vanilla HTML Designer, un éditeur visuel de contenu entièrement réalisé en JavaScript natif.
Pas de React, de Vue, d’Angular ou de jQuery. Aucun processus de compilation n’est nécessaire : les fichiers JavaScript et CSS peuvent être directement intégrés dans une application existante.
Un éditeur organisé en sections et en colonnes
Vanilla HTML Designer utilise une organisation par blocs. Une page est composée de sections successives, chacune pouvant adopter sa propre structure :
- une seule colonne ;
- deux colonnes égales ou asymétriques ;
- trois, quatre, cinq ou six colonnes.
Chaque colonne peut ensuite recevoir différents types de contenus : texte, titre, image, bouton, tableau, citation, séparateur, espaceur ou encore bloc de code.
Les sections, les colonnes et les contenus peuvent être déplacés ou réorganisés visuellement. Cette approche permet de créer aussi bien un article simple qu’une mise en page plus élaborée, sans écrire directement de code HTML.
Une mise en forme complète du texte
La barre d’outils permet d’accéder aux fonctions habituelles d’un éditeur de texte :
- titres de niveau H1 à H6 ;
- paragraphes ;
- gras, italique, souligné et barré ;
- exposant et indice ;
- couleurs du texte et du fond ;
- alignement et retrait ;
- interligne et espacement ;
- listes à puces, alphabétiques, numériques ou romaines ;
- liens, citations et blocs de code ;
- recherche et remplacement ;
- insertion d’images et de vidéos dans le texte.
Les images peuvent être redimensionnées directement à la souris. Leur alignement, leur taille, leur espacement, leur texte alternatif et leur attribut `title` restent également modifiables depuis le panneau des propriétés.
Des contenus modifiables et un HTML indépendant
Vanilla HTML Designer sépare volontairement deux formats :
- le projet JSON, qui conserve la structure nécessaire à une modification ultérieure ;
- le HTML généré, destiné à être enregistré ou affiché sur le site.
Cette séparation permet de reprendre une édition sans perdre la structure du document, tout en produisant un contenu HTML utilisable indépendamment de l’éditeur.
Il est également possible d’importer un contenu HTML existant. L’éditeur reconnaît alors les principaux éléments — titres, paragraphes, listes, images, tableaux ou citations — et les transforme en contenus modifiables.
Une intégration adaptée aux applications existantes
Le composant a été pensé pour pouvoir s’intégrer progressivement dans un projet existant. L’application qui l’héberge reste libre de gérer :
- l’enregistrement des contenus ;
- les sauvegardes automatiques ;
- la galerie d’images ;
- les actions personnalisées ;
- les messages d’état ;
- les types de contenus ou de mises en page disponibles.
L’interface est proposée en français et en anglais. Les commandes de la barre d’outils ainsi que certains types de blocs peuvent être désactivés selon les besoins de l’application.
Un système de plugins permet par ailleurs d’ajouter de nouveaux composants sans modifier le cœur de l’éditeur.
Pourquoi du JavaScript natif ?
Le choix du JavaScript natif répond à plusieurs objectifs : limiter les dépendances, faciliter l’intégration, conserver une base de code lisible et éviter d’imposer une architecture particulière aux projets qui utilisent le composant.
Vanilla HTML Designer peut ainsi être utilisé dans une application PHP traditionnelle, un site administrable ou toute autre interface web capable de charger des modules JavaScript.
Cette indépendance constitue aussi un avantage à long terme : le composant n’est pas lié au cycle de vie d’un framework tiers.
Un projet ouvert et en évolution
Vanilla HTML Designer est distribué sous licence GNU Affero General Public License v3.0 — AGPL-3.0.
Le projet évolue régulièrement à partir de cas d’utilisation concrets : amélioration de l’édition des tableaux, gestion avancée des images, historique d’annulation, restauration des sauvegardes, personnalisation des citations, import HTML ou encore optimisation de l’affichage responsive.
Vous pouvez tester l’éditeur directement en ligne :
Essayer Vanilla HTML Designer.
Le code source et la documentation d’intégration sont disponibles sur GitHub :