division-editor est un projet expérimental développé from scratch pour me permettre d'explorer les défis de la création d’un éditeur HTML riche. L’idée était de disposer d’un outil capable de gérer à la fois l’édition visuelle (WYSIWYG) et le travail direct sur le code, tout en offrant un contrôle fin sur les styles inline, les blocs de code, les images et les liens. Il n'est pas parfait, il reste encore du travail et plusieurs fonctionnalités que je souhaite intégrer (et quelques bugs à corriger).
[screenshot]
Fonctionnalités principales
- Édition WYSIWYG & source : bascule instantanée entre vue visuelle et code HTML brut.
- Blocs de code : coloration syntaxique via highlight.js, indentation Tab/Shift+Tab et mode source.
- Palette de couleurs : sélection et application de teintes au texte sans quitter l’éditeur.
- Styles inline : modification des attributs (liens, marges, espaces) via un modal dédié.
- Gestion des images : upload par glisser‑déposer, insertion par URL et navigation dans une bibliothèque.
- Gestion des liens : création et suppression de liens autour du texte sélectionné.
- Extraction HTML propre : récupération du code final sans les balises temporaires de mise en forme.
Structure du dépôt
-
base.css– styles généraux (toolbar, éditeur, modaux). -
elementStyleEditor.css– styles du modal d’édition inline. -
index.php– point d’entrée, intègre et affiche l’éditeur. -
codeManager.js– coloration, indentation et mode source pour les blocs de code. -
colorPalette.js– palette de couleurs et application sur la sélection. -
editorUtils.js– utilitaires (debounce, formatage HTML, insertion au caret, gestion de la sélection). -
elementStyleEditor.js– modal de modification des styles inline et attributs. -
htmlContentExtractor.js– extraction du HTML “propre”. -
imageHandler.js– upload, prévisualisation et bibliothèque d’images. -
linkManager.js– création et suppression de liens.
Accès au projet
Retrouvez le code source sur GitHub : github.com/divisionbyzero-dev/divisionEditor