Enthüllt! Zweck, Funktionen und Mechanismus von KuroEditor vol.2

Entwicklungspolitik

Da dies für KuroCMS gedacht ist, strebe ich nach maximaler Vielseitigkeit, während die Kernwerte erhalten bleiben. Ein WYSIWYG-Editor ist Pflicht, entwickelt mit reinem Vanilla JS. Er muss außergewöhnlich schnell sein, ohne Frameworks. Ich habe vermieden, einen rein kopflosen Editor zu erstellen, um eine lose Kopplung beizubehalten. Solange der Aufrufer keine @layer spezifiziert, kann er durch Anpassung an das Button-Layout des Aufrufers eine optische Einheit wahren – obwohl ich das in KuroCMS nicht nutzen werde! lol.

Das CSS verwendet nur Tailwind und interne Styles für KuroEditor. Das Tabellenverhalten ähnelt Dropbox Paper. Selbst wenn es noch nicht perfekt poliert ist, ziehe ich die Fertigstellung feinen Anpassungen vor, solange die Benutzerfreundlichkeit nicht wesentlich beeinträchtigt wird. Schließlich geht es erst los, wenn es fertig ist. Ich werde es veröffentlichen, sobald es einigermaßen benutzbar ist.

Detaillierte Spezifikationen

Detaillierte Spezifikationen in einem Blog zu erklären kann mühsam sein, daher zeige ich es Ihnen anhand von Bildern.

Wie gezeigt, bietet KuroEditor zwei Ansichten im oberen Menü: Vorschau und HTML. Ich erwarte jedoch nicht, dass die meisten die HTML-Ansicht nutzen. Sie ist für diejenigen gedacht, die noch nicht in KuroEditor integrierte Funktionen mittels HTML schreiben möchten, oder das interne Verhalten überprüfen wollen.

Als Nächstes folgen Symbole für Emojis, Tabellenerstellung, Medien, Code, horizontale Linien, automatisches Speichern, Speichern und das Inhaltsverzeichnis. Einfache Medien können per Drag-and-Drop direkt an der Cursorposition eingefügt werden, sodass diese Schaltfläche selten benötigt wird.

Grundlegende Textgestaltung

Dekorationen für Text und die Cursorzeile erscheinen, sobald auch nur ein einzelnes Zeichen ausgewählt ist. Dies folgt dem Prinzip, Menüs nicht permanent einzublenden, um die Mausbewegungen zu minimieren.

Von links: Fett, Kursiv, Unterstrichen, Durchgestrichen. Danach folgen H1, H2 usw. für Überschriften. Dann die Zitatleiste und der Hinweisblock. Es folgen Textfarbe, Schriftgröße, Zeilenhöhe, Textausrichtung (links, zentriert, rechts, Blocksatz), ungeordnete und nummerierte Listen. (Übrigens erstellt die Tabulatortaste automatisch einen Absatz.) *Schriftarten können in neueren Versionen ebenfalls ausgewählt werden.

Tabellen haben oberste Priorität

Die Tabellenfunktion ist das Highlight von KuroEditor. Das Einfügen von Zeilen oder Spalten ähnelt Dropbox Paper: Wenn sich die Maus in der Nähe eines Rands befindet, erscheint daneben eine '+' Schaltfläche. Ein Klick darauf fügt eine Zeile oder Spalte ein. Das Löschen erfolgt über die rote '-' Schaltfläche rechts neben einer Zeile oder unter einer Spalte. Die Tabellenbearbeitung ist extrem einfach. Das Verbinden und Teilen von Zellen geschieht mit einem Klick. Sie können sogar die Rahmenstärke und -farbe über ein Kontextmenü feinabstimmen.

Flexible Medienplatzierung

Das Einfügen von Medien ist absolut flexibel. Es ist nicht auf vom Aufrufer gespeicherte Bilder beschränkt; Sie können YouTube-Links oder Listen interessanter Videos einbetten. Wenn Sie eine URL eingeben möchten, löst das Tippen von [[ url ]] sofort eine automatische Erweiterung aus.

Verwendung des Inhaltsverzeichnisses

Das Absatzmanagement für Romane oder Verträge ist mit H1, H2 usw. sehr einfach. Über das Inhaltsverzeichnis im oberen Menü sehen Sie auch bei langen Dokumenten auf einen Blick, wie weit Sie geschrieben haben.

Integrationsübersicht

Schließlich ist die Integration denkbar einfach. Fügen Sie einfach eine Zeile dort ein, wo der Editor stehen soll, und stellen Sie Callback-Funktionen für Aktionen wie das Speichern bereit. Die Übergabe erfolgt als HTML. In KuroCMS wird dieses HTML empfangen und als Artikeldaten gespeichert. Details finden Sie im Link unten. Da es nur wenige Kopplungspunkte gibt, lässt es sich problemlos in jedes Tool integrieren.

Fazit

Japaner lieben Tabellendarstellungen (genauso wie japanische Häuser Schiebewände lieben! lol). Doch nur wenige ausländische Editoren haben gute Implementierungen, und oft mangelt es an visueller Anpassbarkeit. Ich wundere mich besonders, warum Zellverschmelzung so selten ist. Wie dem auch sei, ich hoffe, dass KuroEditor für einige Leute nützlich sein wird.

1. GitHub Code-Repository: https://github.com/Kuro-Boo/KuroEditor
2. KuroEditor Einführungsseite: https://kuro.boo/kuroeditor/
3. KuroEditor Testseite: https://kuro.boo/kuroeditor/sample/