KuroEditor évolue ! Coulisses des nouveautés vol.3
Un suivi sur KuroEditor, présentant les nouveautés de la dernière version ! Nous expliquons en détail les fonctions, leurs raisons d'être et la philosophie de conception.
Désormais au cœur des produits de Kuro-Boo, y compris open source, l'éditeur WYSIWYG « KuroEditor » continue de viser une exécution ultra-rapide en JavaScript pur sans dépendance à un framework, ainsi qu'une prise en main intuitive. Dans notre précédent « vol.2 », nous avions présenté les bases de la mise en forme, le placement des médias et les tableaux inspirés de Dropbox Paper. Mais l'évolution de KuroEditor ne s'arrête pas là. Cette fois, nous mettons en lumière les fonctionnalités ajoutées depuis lors, en expliquant les intentions de développement et le contexte pour vous livrer une histoire absente des manuels classiques. Plongez dans l'univers de « KuroEditor vol.3 », conçu pour exprimer vos idées de manière riche et sans stress.
L'art des tableaux : l'import depuis Excel et l'exigence de mise en page
L'une des fonctions ayant reçu le plus d'attention dans le développement de KuroEditor est celle des tableaux. Quiconque a déjà utilisé des éditeurs WYSIWYG classiques sait à quel point le traitement des tableaux y est rudimentaire. Modifier la couleur de fond d'une cellule, fusionner ou diviser des cellules sont des actions souvent complexes, voire indisponibles.
Structurer les informations dans des tableaux soignés est pourtant indispensable pour clarifier les comparatifs, les grilles de tarifs ou les synthèses de données. C'est pourquoi KuroEditor propose des outils advanced pour gérer les tableaux avec une précision remarquable.
L'atout majeur réside dans la génération automatique de tableaux par simple copier-coller depuis Excel, Google Sheets ou un fichier CSV. Il suffit de coller directement les cellules copiées dans l'éditeur : KuroEditor analyse en arrière-plan les formats (séparés par des tabulations ou des virgules) et reconstitue instantanément un tableau HTML propre. Cela évite d'avoir à recréer chaque cellule manuellement. Préparez votre tableau dans Excel et collez-le directement en toute simplicité.
L'éditeur permet également de régler l'épaisseur et la couleur des bordures extérieures, intérieures, ou même d'une ligne spécifique. Les options de fusion (à droite ou en bas), de division, d'alignement vertical et de couleur de fond de cellule se gèrent intuitivement à la souris. C'est cette attention portée aux détails de mise en page qui distingue KuroEditor des autres solutions.
La différence entre « Enter » et « Shift+Enter » : la structure des paragraphes
Un aspect essentiel du manuel de KuroEditor concerne la différence entre saut de ligne et paragraphe. Selon que vous appuyez sur « Enter » ou « Shift + Enter » pour aller à la ligne suivante, la structure HTML générée est totalement différente. Comprendre cette distinction est primordial pour maîtriser sa mise en page.
Appuyer sur « Enter » crée un nouveau paragraphe (balise <p>), traité comme un bloc indépendant. Les fonctions d'alignement, d'indentation ou de style s'appliquant par paragraphe, vous pouvez facilement aligner à droite une seule ligne si elle est isolée dans son propre bloc. À l'inverse, « Shift + Enter » insère un simple saut de ligne (balise <br>) au sein du même paragraphe. L'ensemble est vu comme un bloc unique, et toute modification d'indentation affectera toutes les lignes associées.
Ce comportement a été pensé pour éviter l'espacement excessif involontaire entre les lignes tout en conservant un contrôle sémantique précis. Utilisez « Shift + Enter » pour regrouper des lignes courtes comme une adresse ou un poème, et « Enter » pour marquer une transition logique. Cette logique s'avère particulièrement utile pour structurer des listes complexes sans contraintes de formatage rigides.
Cette fonction s'avère particulièrement utile pour structurer des listes complexes. Dans de nombreux outils comme Microsoft Word ou Dropbox Paper, les listes numérotées ou marquées sont possibles, mais il arrive parfois d'être frustré car les numéros ne s'enchaînent pas comme on le souhaite, ou l'on ne peut pas insérer un bloc de texte brut entre deux éléments de la liste. KuroEditor simplifie tout cela et permet de créer des listes complexes sans effort.
Le « Bloc arrondi » pour rythmer la mise en page et l'habillage du texte
Les articles en ligne se limitent trop souvent à une colonne verticale où s'alternent texte et images de manière monotone. Bien que la lecture verticale soit la norme sur mobile, ce rendu peut lasser sur grand écran. C'est pour y remédier que la fonction de « Bloc arrondi (kuro-roundbox) » a été créée.
Ce bloc s'insère en un clic depuis le menu inférieur. Il peut contenir du texte, des images ou des tableaux. Un menu contextuel dédié permet de régler sa largeur (de 30 % à 100 %) et son alignement (gauche, centré, droite).
Le point fort réside dans l'habillage du texte. En alignant un bloc à droite avec une largeur de 45 %, le texte suivant vient se placer naturellement sur sa gauche. C'est idéal pour ajouter des encadrés ou des notes de lecture. Pour arrêter cet habillage, il suffit d'insérer une ligne horizontale (hr) qui renvoie la suite du contenu sous le bloc. Ce système apporte du relief et améliore le confort de lecture.
Les « Cartes URL » et les raccourcis émoji pour fluidifier l'écriture
Les liens sont indispensables sur le web, mais les simples liens textuels bleus manquent parfois de visibilité lorsqu'il s'agit de mettre en valeur une référence importante ou un produit. KuroEditor résout ce problème avec les « Cartes URL (kuro-url-card) ».
Lors de la création d'un lien, cocher l'option carte permet de récupérer automatiquement les métadonnées de la cible (icône, titre, URL) pour générer un bloc visuel élégant. Le lecteur identifie immédiatement la destination du lien. Si le site cible est indisponible, l'éditeur masque proprement les éléments manquants plutôt que d'afficher des images brisées. Contrairement à d'autres outils comme Dropbox Paper qui transforment automatiquement chaque URL en carte, KuroEditor laisse le choix entre un lien classique, une carte fine ou une carte enrichie avec images.
Pour ne pas couper le rythme de saisie, l'éditeur intègre aussi les codes courts pour les émojis. Plus besoin de chercher dans un menu à la souris : tapez simplement :smile:, :fire: ou :+1: pour que le code se transforme instantanément en émoji. Un gain de temps appréciable pour les rédacteurs réguliers.
Listes de tâches et « Cartes Recette » sémantiques
KuroEditor intègre également des fonctions pratiques pour un usage personnel, comme les listes de tâches (Todo), utiles dans les applications de prise de notes.
- Vérifier les e-mails
- Préparer le café
Taper [] en début de ligne génère une case à cocher. L'état coché est enregistré directement dans le code HTML de l'article. Sur la page publique, ces cases servent d'élément visuel fixe et ne peuvent pas être cochées par les lecteurs (ce qui nécessiterait une base de données par visiteur), mais elles restent très utiles pour structurer des guides ou des listes de contrôle.
Pour les blogs culinaires, l'éditeur propose une « Carte Recette (kuro-recipe) » structurée. Elle regroupe le nombre de parts, les temps de préparation, les ingrédients et les étapes de réalisation. Cette carte génère des données structurées conformes aux exigences SEO de Google pour les recettes. Par souci de clarté pour le lecteur, la carte est limitée à un seul exemplaire par article (le bouton devient grisé si une carte est déjà présente). Pour en savoir plus, consultez l'article sur les recettes de KuroCMS.
Blocs de code optimisés : réorganisation par glisser-déposer et bouton de copie
Pour les articles techniques, l'affichage du code est crucial. KuroEditor facilite la vie des développeurs avec des blocs de code interactifs conçus pour simplifier la saisie et la lecture.
Il est ainsi possible de déplacer un bloc de code verticalement en le glissant-déposant par sa zone de numéros de ligne. C'est bien plus sûr et pratique que de couper et coller du texte, ce qui risque souvent de casser l'indentation ou de corrompre la structure HTML.
De plus, pour améliorer l'expérience des lecteurs, un script dédié ajoute automatiquement un bouton de copie rapide (📋) en haut à droite des blocs de code sur les pages publiques. Une attention particulière qui simplifie l'usage des extraits de code.
Conclusion : la fidélité absolue du WYSIWYG
KuroEditor ne cherche pas seulement à aligner du texte, mais à offrir une expérience WYSIWYG totale où le rendu en cours d'édition correspond exactement à la page publiée. Réaliser cela en JavaScript pur, sans framework ni compromis sur la vitesse de chargement, représentait un défi de taille. Grâce à sa conception modulaire, KuroEditor s'intègre en quelques lignes de code dans n'importe quel CMS pour offrir une expérience d'écriture fluide et performante.