Dévoilé ! Objectif, fonctions et mécanisme de KuroEditor vol.2

Politique de développement

Puisque cet outil est destiné à KuroCMS, je cherche à offrir le maximum de polyvalence tout en restant fidèle à l'essentiel. Un éditeur WYSIWYG est indispensable, développé en pur Vanilla JS. Il doit être extrêmement rapide, sans aucun framework. J'ai évité de concevoir un éditeur strictement headless pour conserver un couplage lâche. Tant que l'appelant ne spécifie pas de @layer, l'éditeur peut s'adapter à la disposition de ses boutons pour garder une unité visuelle – bien que je n'utiliserai pas cette option dans KuroCMS ! lol.

Le CSS s'appuie uniquement sur Tailwind et des styles internes à KuroEditor. Le comportement des tableaux s'apparente à celui de Dropbox Paper. Pour le moment, même si tout n'est pas parfaitement poli, tant que l'ergonomie n'est pas trop altérée, je privilégie la finalisation aux ajustements de détail. Après tout, rien ne commence tant que ce n'est pas fini. Je le publie dès qu'il est raisonnablement exploitable.

Spécifications détaillées

Expliquer les spécifications détaillées dans un article peut être fastidieux, je préfère donc vous les présenter en images.

Comme illustré, KuroEditor propose deux types de vues dans son menu supérieur : aperçu et HTML. Je pense toutefois que la plupart des utilisateurs n'utiliseront pas la vue HTML. Elle s'adresse à ceux qui souhaitent coder en HTML des fonctionnalités non encore intégrées à KuroEditor, ou vérifier le comportement interne de l'outil.

Viennent ensuite les icônes pour les emojis, la création de tableaux, l'insertion de médias, le code, les lignes horizontales, la sauvegarde automatique, l'enregistrement et la table des matières. Les médias de base peuvent être glissés-déposés directement à la position du curseur, ce bouton est donc rarement utilisé.

Mise en forme de base du texte

Les outils de mise en forme du texte et de la ligne du curseur apparaissent dès qu'un seul caractère est sélectionné. Cela évite d'afficher des menus en permanence et limite les déplacements de la souris.

De gauche à droite : Gras, Italique, Souligné, Barré. Viennent ensuite les styles H1, H2, etc., pour les titres. Puis la barre de citation et le bloc d'alerte. Suivent la couleur du texte, la taille de la police, la hauteur de ligne, l'alignement (gauche, centré, droite, justifié), les listes à puces et ordonnées. (Au passage, la touche Tab génère automatiquement un paragraphe.) *Les polices de caractères peuvent également être choisies dans les versions récentes.

Priorité absolue aux tableaux

La gestion des tableaux est le point fort de KuroEditor. L'insertion de lignes ou de colonnes s'inspire de Dropbox Paper : lorsque la souris s'approche d'une bordure, un bouton « + » apparaît. Un clic suffit pour insérer. La suppression s'effectue via le bouton rouge « - » à droite d'une ligne ou sous une colonne. Manipuler les tableaux est un jeu d'enfant. La fusion et la division de cellules se font en un clic. Un menu contextuel permet également d'ajuster l'épaisseur et la couleur des bordures.

Insertion de médias flexible

L'insertion de médias est totalement libre. Elle ne se limite pas aux images de l'appelant ; vous pouvez intégrer des vidéos YouTube pour créer des classements musicaux ou des listes de lecture. Pour saisir une URL directement au clavier, tapez [[ url ]] pour déclencher l'auto-expansion.

Utilisation de la table des matières

La structure des longs documents (romans, contrats) se gère aisément avec H1, H2, etc. La table des matières du menu supérieur permet de visualiser d'un coup d'œil votre progression.

Aperçu de l'intégration

Enfin, l'intégration est extrêmement simple. Il suffit d'insérer une ligne de code à l'emplacement souhaité pour l'éditeur et de configurer des fonctions de rappel pour la sauvegarde. Les données sont transmises au format HTML. Dans KuroCMS, ce code HTML reçu est stocké et géré comme données de l'article. Pour plus de détails, reportez-vous au lien ci-dessous. Le couplage étant très lâche, l'intégration dans n'importe quel outil est facilitée.

Conclusion

Les Japonais adorent les tableaux (tout comme les maisons japonaises aiment les cloisons ! de l'humour). Pourtant, peu d'éditeurs étrangers proposent des implémentations de qualité, et la personnalisation visuelle fait souvent défaut. Je m'étonne en particulier que la fusion de cellules soit si rare. Quoi qu'il en soit, j'espère que KuroEditor se révélera utile.

Dépôt GitHub du code : https://github.com/Kuro-Boo/KuroEditor
Page de présentation de KuroEditor : https://kuro.boo/kuroeditor/
Page de test de KuroEditor : https://kuro.boo/kuroeditor/sample/