KuroEditor entwickelt sich! Hintergründe der Features vol.3
Ein Follow-up zu KuroEditor mit den neuesten Funktionen! Wir erklären die Features, ihre Hintergründe und die Designphilosophie ausführlich aus der Sicht des Entwicklers.
Der WYSIWYG-Editor „KuroEditor“, der mittlerweile das Herzstück der Produkte von Kuro-Boo (einschließlich Open Source) bildet, setzt weiterhin auf ultraschnelle Leistung durch Vanilla JavaScript ohne Framework-Abhängigkeiten und intuitive Bedienbarkeit. Im vorherigen „vol.2“ haben wir die Grundlagen der Textformatierung, Medienplatzierung und Tabellenfunktionen im Dropbox-Paper-Stil vorgestellt. Doch die Entwicklung von KuroEditor steht nicht still. Dieses Mal greifen wir die seither hinzugefügten und markantesten Funktionen auf und erklären die Entwicklungsabsichten sowie die Hintergründe, um Ihnen eine Geschichte zu erzählen, die in keinem Handbuch steht. Lassen Sie uns in das Gesamtbild von „KuroEditor vol.3“ eintauchen, das entwickelt wurde, um Ihre Welt reichhaltig und stressfrei auszudrücken.
Tabellenbearbeitung im Detail: Excel-Import und perfekte Strukturierung
Die Tabellenfunktion war einer der Bereiche, der bei der Entwicklung von KuroEditor die größte Aufmerksamkeit erhielt. Viele gängige WYSIWYG-Editoren behandeln Tabellen sehr stiefmütterlich. Das Ändern der Zellenhintergrundfarbe oder das Zusammenführen und Teilen von Zellen ist oft kompliziert oder gar nicht möglich.
Strukturierte Tabellen sind jedoch unerlässlich, um Daten wie Vergleiche oder Preislisten übersichtlich darzustellen. Daher bietet KuroEditor erweiterte Werkzeuge, mit denen Tabellen präzise gestaltet werden können.
Ein wesentlicher Vorteil ist die automatische Tabellengenerierung durch Kopieren und Einfügen aus Excel, Google Sheets oder CSV-Dateien. Fügen Sie die kopierten Zellen direkt in den Editor ein: KuroEditor analysiert die Formate im Hintergrund und erstellt sofort eine saubere HTML-Tabelle. Das manuelle Erstellen jeder einzelnen Zelle entfällt. Erstellen Sie Ihre Tabelle in Excel und fügen Sie sie ganz einfach ein.
Der Editor ermöglicht es auch, die Dicke und Farbe der äußeren und inneren Rahmen oder einer bestimmten Linie anzupassen. Optionen zum Zusammenführen, Teilen, zur vertikalen Ausrichtung und zur Zellenhintergrundfarbe lassen sich intensiv mit der Maus steuern. Diese Liebe zum Detail unterscheidet KuroEditor von anderen Lösungen.
Der Unterschied zwischen „Enter“ und „Shift+Enter“: Die Struktur der Absätze
Ein wichtiger Aspekt in der Anleitung von KuroEditor betrifft den Unterschied zwischen Zeilenumbruch und Absatz. Je nachdem, ob Sie „Enter“ oder „Shift + Enter“ drücken, um in die nächste Zeile zu wechseln, ist die erzeugte HTML-Struktur völlig unterschiedlich. Das Verständnis dieser Unterscheidung ist für ein sauberes Layout unerlässlich.
Das Drücken von „Enter“ erstellt einen neuen Absatz (<p>-Tag), der als unabhängiger block behandelt wird. Da Formatierungen wie Ausrichtung, Einzug oder Stil pro Absatz gelten, können Sie eine einzelne Zeile einfach rechtsbündig ausrichten, wenn sie sich in ihrem eigenen Block befindet. Umgekehrt fügt „Shift + Enter“ einen einfachen Zeilenumbruch (<br>-Tag) innerhalb desselben Absatzes ein. Das Ganze wird als ein einziger Block betrachtet, und jede Änderung des Einzugs wirkt sich auf alle zugehörigen Zeilen aus.
Dieses Verhalten wurde entwickelt, um ungewollte Abstände zwischen den Zeilen zu vermeiden und gleichzeitig eine präzise sementische Kontrolle zu ermöglichen. Verwenden Sie „Shift + Enter“ für kurze, zusammenhängende Zeilen wie Adressen oder Gedichte und „Enter“ für logische Übergänge. Dies ist besonders nützlich, um komplexe Listen ohne starre Formatierungszwänge zu strukturieren.
Diese Funktion erweist sich besonders bei Listen als nützlich. In vielen Tools wie Microsoft Word oder Dropbox Paper sind nummerierte Listen möglich, aber es ist oft frustrierend, wenn sich die Nummern nicht wunschgemäß fortsetzen oder wenn man keinen einfachen Textblock zwischen den Elementen einfügen kann. KuroEditor vereinfacht all dies und ermöglicht das problemlose Erstellen komplexer Listen.
Die „Abgerundete Box“ für ein dynamisches Layout und Textumfluss
Online-Artikel beschränken sich oft auf eine vertikale Spalte, in der sich Text und Bilder monoton abwechseln. Obwohl das vertikale Lesen auf Mobilgeräten der Standard ist, kann dies auf großen Bildschirmen langweilig wirken. Um dem entgegenzuwirken, wurde die Funktion „Abgerundete Box (kuro-roundbox)“ entwickelt.
Diese Box lässt sich mit einem Klick aus dem unteren Menü einfügen. Sie kann Text, Bilder oder Tabellen enthalten. Ein spezielles Kontextmenü ermöglicht es, die Breite (von 30 % bis 100 %) und die Ausrichtung (links, zentriert, rechts) anzupassen.
Der große Vorteil liegt im Textumfluss. Wenn eine Box mit einer Breite von 45 % rechtsbündig ausgerichtet wird, fließt der folgende Text natürlich links daran vorbei. Dies ist ideal für Infokästen oder Anmerkungen. Um diesen Umfluss zu beenden, genügt das Einfügen einer horizontalen Linie (hr), die den folgenden Inhalt unter die Box verschiebt. Dies bringt Abwechslung und verbessert den Lesekomfort.
„URL-Karten“ und Emoji-Shortcuts für einen flüssigen Schreibfluss
Links sind im Web unverzichtbar, aber einfache blaue Textlinks fallen manchmal zu wenig auf, wenn es darum geht, wichtige Referenzen hervorzuheben. KuroEditor löst dieses Problem mit den „URL-Karten (kuro-url-card)“.
Beim Erstellen eines Links können Sie die Option „Karte“ wählen, um automatisch die Metadaten des Ziels abzurufen und einen eleganten visuellen Block zu generieren. Der Leser erkennt sofort das Ziel des Links. Sollte die Zielseite nicht erreichbar sein, blendet der Editor die fehlenden Elemente sauber aus. Im Gegensatz zu anderen Tools wie Dropbox Paper, die jeden Link automatisch in eine Karte umwandeln, lässt KuroEditor die Wahl zwischen einem klassischen Link, einer einfachen Karte oder einer erweiterten Karte.
Um den Schreibfluss nicht zu unterbrechen, integriert der Editor auch Kurzcodes für Emojis. Sie müssen Emojis nicht mehr mühsam mit der Maus suchen: Tippen Sie einfach :smile:, :fire: oder :+1:, damit sich der Code sofort in ein Emoji verwandelt. Eine echte Zeitersparnis für regelmäßige Autoren.
Aufgabenlisten und semantische „Rezept-Karten“
KuroEditor enthält auch praktische Funktionen für den persönlichen Gebrauch, wie Aufgabenlisten (Todo), die in Notiz-Apps nützlich sind.
- E-Mails prüfen
- Kaffee kochen
Das Tippen von [] am Zeilenanfang erzeugt ein Kontrollkästchen. Der Status wird direkt im HTML-Code des Artikels gespeichert. Auf der öffentlichen Seite dienen diese Kästchen als festes visuelles Element und können nicht von Lesern angeklickt werden, sind aber dennoch sehr nützlich, um Anleitungen oder Checklisten zu strukturieren.
Für Food-Blogs bietet der Editor eine strukturierte „Rezept-Karte (kuro-recipe)“. Sie fasst die Anzahl der Portionen, Zubereitungszeiten, Zutaten und Zubereitungsschritte zusammen. Diese Karte generiert strukturierte Daten gemäß den Google-SEO-Richtlinien für Rezepte. Um die Übersichtlichkeit für den Leser zu wahren, ist die Karte auf ein Exemplar pro Artikel beschränkt (die Schaltfläche wird ausgegraut, wenn bereits eine Karte vorhanden ist). Weitere Informationen finden Sie im Artikel über Rezepte in KuroCMS.
Optimierte Code-Blöcke: Drag-and-Drop-Reorganisierung und Kopier-Schaltfläche
Bei technischen Artikeln ist die Darstellung von Code entscheidend. KuroEditor erleichtert Entwicklern die Arbeit mit interaktiven Code-Blöcken, die das Schreiben und Lesen vereinfachen.
Es ist möglich, einen Code-Block vertikal zu verschieben, indem man ihn an den Zeilennummern zieht. Dies ist viel sicherer und praktischer als das Ausschneiden und Einfügen von Text, bei dem oft die Einrückung verloren geht oder die HTML-Struktur beschädigt wird.
Um die Benutzererfahrung der Leser zu verbessern, fügt ein Skript automatisch eine Kopier-Schaltfläche (📋) oben rechts in den Code-Blöcken auf öffentlichen Seiten hinzu. Ein nützliches Detail, das die Verwendung von Code-Snippets vereinfacht.
Fazit: Absolute WYSIWYG-Treue
KuroEditor möchte nicht nur Text ausrichten, sondern ein echtes WYSIWYG-Erlebnis bieten, bei dem das Layout während der Bearbeitung exakt der veröffentlichten Seite entspricht. Dies in Vanilla JavaScript ohne Frameworks oder Einbußen bei der Ladegeschwindigkeit zu realisieren, war eine große Herausforderung. Dank des modularen Designs lässt sich KuroEditor in wenige Zeilen Code in jedes CMS integrieren.