react markdown Download - react markdown Quellcode herunterladen

react markdown

Andere Ressourcen

2.3.13

Herunterladen

react markdown

Gebaut mit Slate-JS

Verwendung

NPM-Paket installieren:

npm install -E @opuscapita/react-markdown

Importieren Sie es in Ihre Anwendung

import MarkdownInput from '@opuscapita/react-markdown

Weitere Details finden Sie im interaktiven Beispiel: https://opuscapita.github.io/react-markdown

Demo bereitgestellt von React Showroom

Wenn Sie Bootstrap Modal zusammen verwenden möchten, müssen Sie Stile hinzufügen:

 .markdown-input_fullscreen { // pass this class to Modal component
  overflow: hidden;
}
.markdown-input_fullscreen.modal.in .modal-dialog {
  transform: none;
}

Wie es funktioniert

MarkdownEditor unterstützt die folgenden Dekoratoren:

bold
italic
strikethrough
heading-1
heading-2
heading-3
heading-4
heading-5
heading-6
list
ordered-list

Schaltflächen (ihre Gruppen, Reihenfolge)

[B, I, S] [A] [H1, H2, H3, H4, H5, H6], [UL, OL]

Inline-Textaktionen
- [B] – fette Markierung
- [I] – kursive Markierung
- [S] – durchgestrichenes Zeichen
Link
- [A] – Ankereinsatz
Textblockaktionen
- [H1] – Kopfzeile 1 Block
- [H2] – Header-2-Block
- [H3] – Header-3-Block
- [H4] – Header-4-Block
- [H5] – Kopfzeile 5 Block
- [H6] – Kopfzeile 6 Block
Listen
- [UL] – Listenblock
- [OL] – geordneter Listenblock

Hinweis zur mehrzeiligen Auswahl : Für die mehrzeilige Auswahl sind nur list und ordered list verfügbar. Andere Schaltflächen in einer Symbolleiste sind deaktiviert, da sonst die Markdown-Hervorhebung inkonsistent wird.

Verhalten

Blockelemente

Schaltfläche „Liste“ [UL].

Hier finden Sie eine Spezifikation per Videobeispiel für diese Schaltfläche

List-Button-optimiert

Fügen Sie die Markierung „*“ am Anfang der Zeile ein, wenn die Zeile nicht mit [‘{Nummer} beginnt. ', '#', '## ', '### ', '#### ', '##### ', '###### ']
Durch die Markierung „*“ ersetzen, wenn die Zeile mit [‘{Nummer} beginnt. ', '#', '## ', '### ', '#### ', '##### ', '###### ']
Fügen Sie die Markierung „*“ am Anfang der nächsten Zeile ein, wenn enter am Ende der Zeile gedrückt wird, die als Listenelement markiert ist, sofern das Element Text enthält
Löschen Sie die Zeile aus „*“ und setzen Sie den Cursor auf eine neue Zeile, wenn der Benutzer am Ende der Zeile, die als Listenelement markiert enter , aber keinen Text enthält, die Eingabetaste gedrückt hat

Schaltfläche „Geordnete Liste“ [OL].

Hier ist eine Spezifikation per Videobeispiel für diese Schaltfläche

Bestellliste-Button-optimiert

Markierung „1“ einfügen. ' am Anfang der Zeile, wenn diese nicht mit ['* ', '# ', '## ', '### ', '#### ', '##### ', '## beginnt #### ']
Durch Markierung „1“ ersetzen. ' wenn die Zeile mit ['* ', '# ', '## ', '### ', '#### ', '##### ', '###### '] beginnt
Fügen Sie die Markierung „{Nummer+1}“ am Anfang der nächsten Zeile ein, wenn enter am Ende der als Listenelement markierten Zeile gedrückt wird, wenn das Element Text enthält
Löschen Sie die Zeile aus „{Nummer}“ und setzen Sie den Cursor auf eine neue Zeile, wenn der Benutzer am Ende der Zeile, die als geordnetes Listenelement enter ist, aber keinen Text enthält, die Eingabetaste gedrückt hat

Schaltflächen für Kopfzeilenelement [h1–h6].

Hier ist eine Spezifikation anhand eines Videobeispiels für die Schaltfläche [H2] (andere Kopfschaltflächen funktionieren entsprechend).

H2-Button-optimiert

Fügen Sie die Markierung „#“ – „######“ (abhängig von der Schaltfläche) am Anfang der Zeile ein, wenn diese nicht mit [‘*‘, ‚{Nummer}‘ beginnt. ']
Ersetzen Sie durch die Markierung '# ' - '###### ' (abhängig von der Schaltfläche), wenn die Zeile mit ['* ', '{Nummer}' beginnt. ']
Entfernen Sie die vorhandene Kopfzeilenmarkierung, wenn auf die entsprechende Kopfzeilenschaltfläche geklickt wird
Aktualisieren Sie die vorhandene Kopfzeilenmarkierung auf eine andere Kopfzeilenmarkierung, wenn die aktuelle Kopfzeilenmarkierung nicht der gedrückten Kopfzeilenschaltfläche entspricht

Markierte Elemente

Hier finden Sie eine Beispielvideospezifikation für diese Schaltflächen

fett-kursiv-durchgestrichen-optimiert

Fettgedruckte Schaltfläche [B].

Ausgewählter Text wird mit „**“ umbrochen, z. B. {selected_text} -> **{selected_text}**
Wenn der ausgewählte Text fetten Text enthält, wird er entpackt, zum Beispiel **{selected_text}** -> {selected_text}
Fügt „**{cursor}**“ an der Cursorposition ein, wenn kein Text ausgewählt ist und der Cursor darin platziert wird

Schaltfläche „Kursiv“ [I].

Ausgewählter Text wird mit „_“ umbrochen, z. B. {selected_text} -> _{selected_text}_
Wenn der ausgewählte Text kursiv markiert ist, wird er entpackt, zum Beispiel _{selected_text}_ -> {selected_text}
Fügt „_{cursor}_“ an der Cursorposition ein, wenn kein Text ausgewählt ist und der Cursor darin platziert wird

Durchgestrichene [S]-Taste

Ausgewählter Text wird mit „~~“ umbrochen, z. B. {selected_text} -> ~~{selected_text}~~
Wenn ausgewählter Text als durchgestrichen markiert ist, wird er entpackt, zum Beispiel ~~{selected_text}~~ -> {selected_text}
Fügt „~~{cursor}~~“ an der Cursorposition ein, wenn kein Text ausgewählt ist und der Cursor darin platziert wird

Inline-Elemente

Schaltfläche „Externer Anker“ [A].

Hier ist eine Spezifikation per Videobeispiel für diese Schaltfläche

Link-Button-optimiert

Umschließt ausgewählten Text mit „[“ und „](http://example.com)“, zum Beispiel {selected_text} -> [{selected_text}](http://example.com)
Fügt Text [Linktext](http://example.com) an der Cursorposition ein, wenn kein Text ausgewählt ist.

Bekannte Probleme

Im Falle einer mehrzeiligen Auswahlsymbolleiste sind alle Schaltflächen außer list und ordered list nicht verfügbar (es wird keine Aktion unterstützt).
Codeblöcke werden nicht unterstützt