tui.editor

GFM Markdown und Wysiwyg Editor - produktiv und erweiterbar

Inhaltsverzeichnis

• Pakete
• Warum Toast UI Editor?
• Merkmale
• Beispiele
• Browserunterstützung
• Anforderungsschritte ziehen
• Beitragen
• Toast UI -Familie
• Verwendet von
• Lizenz

? Pakete

Toast UI Editor

Name	Beschreibung
@toast-ui/editor	Einfache JavaScript -Komponente

Wrapper des Toast UI -Redakteur

Name	Beschreibung
@toast-ui/react-editor	Reagieren Sie die Wrapper -Komponente
@toast-ui/vue-editor	Vue -Wrapper -Komponente

Plugins des Toast UI Editors

Name	Beschreibung
@toast-ui/editor-plugin-chart	Plugin -to -Render -Diagramm
@toast-ui/editor-plugin-code-syntax-highlight	Plugin to Hervorhebung der Code -Syntax
@toast-ui/editor-plugin-color-syntax	Plugin -to -Farbbearbeitungstext
@toast-ui/editor-plugin-table-merged-cell	Plugin -to -Fusion -Tabellenspalten
@toast-ui/editor-plugin-uml	Plugin, um UML zu rendern

? Warum Toast UI Editor?

Toast UI Editor bietet den Markdown -Modus und den Wysiwyg -Modus . Abhängig von der Art der Verwendung möchten Sie wie die Produktion von Markdown oder möglicherweise nur den Markdown bearbeiten. Der Toast UI -Editor kann sowohl für die Verwendung hilfreich sein. Es bietet den Markdown -Modus und den Wysiwyg -Modus , der jeden Zeitpunkt umgeschaltet werden kann.

Produktiver Markdown -Modus

Commonmark + GFM -Spezifikationen

Heute ist Commonmark der de-facto -Markdown- Standard. GFM (GitHub -Aroma -Markdown) ist eine weitere beliebte Spezifikation, die auf Commonmark basiert - bei der Github aufrechterhalten wird, die meist verwendete Markdowns . Toast UI -Editor folgt sowohl Commonmark- als auch GFM -Spezifikationen. Schreiben Sie Dokumente mit produktiven Tools, die von Toast UI Editor bereitgestellt werden, leicht, und Sie können das erzeugte Dokument, wo immer die Spezifikationen unterstützt werden, problemlos öffnen.

• Live -Vorschau : Bearbeiten Sie den Markdown, während Sie die gerenderte HTML im Auge behalten. Ihre Änderungen werden sofort angewendet.
• Scrollsynchronisation : Synchrones Scrollen zwischen Markdown und Vorschau. Sie müssen nicht separat durch jedes durch jeden scrollen.
• Syntax Highlight : Sie können die zerstörte Markdown -Syntax sofort überprüfen.

Einfacher Wysiwyg -Modus

• Tabelle : Über das Kontextmenü der Tabelle können Sie Spalten oder Zeilen der Tabelle hinzufügen oder löschen und auch Text in Zellen anordnen.
• Benutzerdefinierte Blockeditor : Der benutzerdefinierte Blockbereich kann über den internen Editor bearbeitet werden.
• Kopieren und einfügen : Fügen Sie alles aus Browser, Screenshot, Excel, PowerPoint usw. ein.

Ui

• Symbolleiste : Über die Symbolleiste können Sie dem von Ihnen bearbeitenden Dokument Elemente stylen oder hinzufügen.

• Dunkeles Thema : Sie können das dunkle Thema verwenden.

Verwendung verschiedener erweiterter Funktionen - Plugins

Commonmark und GFM sind großartig, aber wir brauchen oft mehr Abstraktion. Der Toast UI -Editor verfügt über leistungsstarke Plugins entsprechen der Markdown -Syntax.

Fünf grundlegende Plugins werden wie folgt bereitgestellt und können mit NPM heruntergeladen und verwendet werden.

• chart : Ein als "Diagramm" gekennzeichnetes Codeblock wird das Toast UI -Diagramm rendern.
• code-syntax-highlight : Markieren Sie den Code-Blockbereich, der der von Prism.js bereitgestellten Sprache entspricht.
• color-syntax : Mit dem Toast UI Colorpicker können Sie die Farbe des Bearbeitungstextes mit der GUI ändern.
• table-merged-cell : Sie können Spalten des Tischkopfs und Körperbereichs zusammenführen.
• uml : Ein als 'UML' gekennzeichnetes Codeblock macht UML -Diagramme.

? Merkmale

• Viewer: Unterstützt einen Modus, um nur Markdown -Daten ohne Bearbeitungsbereich anzuzeigen.
• Internationalisierung (i18n): Unterstützt Englisch, Niederländisch, Koreanisch, Japanisch, Chinesisch, Spanisch, Deutsch, Russisch, Französisch, Ukrainisch, türkisch, finnisch, tschechisch, arabisch, polnisch, galizisch, schwedisch, italienisch, norwegisch, kroatisch + Sprache und Sie können sich erweitern.
• Widget: Mit dieser Funktion können Sie die Regeln konfigurieren, die die Zeichenfolge an einen bestimmten RegExp durch den Widget -Knoten ersetzt.
• Benutzerdefinierte Block: Knoten, die nicht durch Markdown unterstützt werden, können über den benutzerdefinierten Block definiert werden. Sie können den Knoten zeigen, was Sie möchten, indem Sie die Parsen -Logik mit benutzerdefiniertem Block schreiben.

? Beispiele

• Basic
• Zuschauer
• Mit allen Plugins
• Erstellen des Plugins des Benutzers
• Anpassen der Tasten Toobar
• Internationalisierung (i18n)

Hier sind weitere Beispiele und spielen mit Toast UI Editor!

? Browserunterstützung

Chrom	Internet Explorer	Rand	Safari	Firefox
Ja	11+	Ja	Ja	Ja

? Anforderungsschritte ziehen

Toast UI -Produkte sind Open Source, sodass Sie nach der Behebung von Problemen eine Pull -Anfrage (PR) erstellen können. Führen Sie NPM -Skripte aus und entwickeln Sie sich mit dem folgenden Prozess.

Aufstellen

Gabel main in Ihr persönliches Repository. Klonen Sie es auf den lokalen Computer. Installieren Sie Knotenmodule. Vor Beginn der Entwicklung sollten Sie überprüfen, ob Fehler auftreten.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

Toast UI Editor verwendet den NPM -Arbeitsbereich, sodass Sie die Umgebung basierend auf NPM7 festlegen müssen. Wenn Subversion verwendet wird, müssen Abhängigkeiten durch Verschieben direkter Pfade pro Paket installiert werden.

Entwickeln

Sie können sehen, dass Ihr Code reflektiert wird, sobald Sie den Code speichern, indem Sie einen Server ausführen. Verpassen Sie nicht das Hinzufügen von Testfällen und machen Sie dann Green Rights.

Rennen Sie Schneeverpackungs-Dev-Server

Mit Snowpack können Sie einen Entwicklungsserver ohne Bündelung durchführen.

$ npm run serve editor

Führen Sie Webpack-dev-Server aus

Wenn das Testen von Legacy -Browsern erforderlich ist, kann der Entwicklungsserver weiterhin mit einem Webpack ausgeführt werden.

$ npm run serve:ie editor

Test durchführen

$ npm test editor

Anfrage ziehen

Führen Sie vor dem Hochladen Ihres PR ein letztes Mal durch, um zu überprüfen, ob Fehler vorliegen. Wenn es keine Fehler gibt, verpflichten Sie und dann schieben Sie es!

Weitere Informationen zu den Schritten von PR finden Sie unter Links im Abschnitt mit Beitrag.

Beitragen

• Verhaltenskodex
• Richtlinie beitragen
• Konvention begehen
• Richtlinien ausgeben

? Toast UI -Familie

• Toast UI -Kalender
• Toast UI -Diagramm
• Toast UI Grid
• Toast UI Image Editor
• Toast UI -Komponenten

Verwendet von

• Nhntür! - Kollaborationsservice (Projekt, Messenger, Mail, Kalender, Drive, Wiki, Kontakte)
• Unotes - Visual Studio Codeerweiterung

Lizenz

Diese Software ist unter der MIT © NHN -Cloud lizenziert.