BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
Dies ist eine Markdown -Editor -Komponente für Blazor WebAssembly und Blazor Server mit .NET8. Die Komponente basiert auf der EASYMDE Version 1.0.x, um den Editor zu erstellen. Ich habe mich entschlossen, mein Repository für die JavaScript -Bibliothek zu erstellen, weil ich die Kontrolle über die Updates und Änderungen haben wollte. Die Komponente ist ein Wrapper um die JavaScript -Bibliothek und eine Blazor -Komponente, mit der Sie den Markdown -Editor in Ihrer Blazor -Anwendung verwenden können.
Weitere Dokumentationen und Hilfe dieser Komponente finden Sie in dem hier erstellten Beitrag.
Versuchen Sie es mit dem Markdown -Editor online (Upload ist nicht aktiviert)
Fügen Sie den Editor zu Ihren _Imports.razor hinzu
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
Dann fügen Sie in Ihrem index.html , host.html oder App.razor die folgenden Zeilen hinzu:
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
Denken Sie daran, dass auch jQuery erforderlich ist. Die Komponente enthält das Easy Markdown -Editor -Skript Version 1.0.x, das auch von mir selbst verwaltet wird. Sie können dieses Skript in Ihr Projekt hinzufügen, aber wenn Sie das Skript in der Komponente verwenden, sind Sie sicher, dass es gut funktioniert und alle Funktionen getestet werden.
Der CSS markdowneditor.css enthält den Stil für die neuen Tags, die ich im Markdown -Editor wie att , note , tip , warn und video hinzugefügt habe.
Auf einer Razor können wir die Komponente mit diesen Zeilen hinzufügen
<div class="col-md-12">
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged" />
<hr />
<h3>Result</h3>
@((MarkupString)markdownHtml)
</div>
@code {
string markdownValue = "#Markdown EditornThis is a test";
string markdownHtml;
Task OnMarkdownValueChanged(string value)
{
return Task.CompletedTask;
}
Task OnMarkdownValueHTMLChanged(string value)
{
markdownHtml = value;
return Task.CompletedTask;
}
}
Die Hauptunterschiede zwischen value und ValueHTMLChanged besteht darin, dass Value den im Editor geschriebenen Text als Zeichenfolge zurückgibt, während ValueHTMLChanged den gerenderten HTML -Code für den Text zurückgibt. Der ValueHTMLChanged enthält den Code zum Anzeigen von Meerjungfrau -Diagrammen in einem SVG -Tag.
Das Ergebnis ist wie im folgenden Screenshot ein netter Markdown -Editor. Dies ist ein Screenshot aus der Demo in diesem Repository.
Fügen Sie in Ihrem Markdown -Editor den folgenden Code hinzu
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false"
CustomButtonClicked="@OnCustomButtonClicked">
<Toolbar>
<MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
<MarkdownToolbarButton Separator Name="Custom button"
Value="@("Hello from your custom Toolbar Button")"
Icon="fa fa-star"
Title="A Custom Button" />
<MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor"
Icon="fa fab fa-github" Title="A Custom Link" />
</Toolbar>
</MarkdownEditor>
@code {
// omitted code...
Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
{
Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
buttonText += "OnCustomButtonClicked -> " + eventArgs.Value + "<br />";
return Task.CompletedTask;
}
}
Im Tag MarkdownEditor fügen Sie die neue Registerkarten Toolbar hinzu, die einen oder mehrere MarkdownToolbarButton enthält.
Jedes MarkdownToolbarButton kann eine der Action (siehe Tabelle unten) oder einen benutzerdefinierten Wert haben, z. B. einen Link zu einer Website. Wenn Sie vor einem MarkdownToolbarButton eine vertikale Linie anzeigen möchten, fügen Sie das Separator im MarkdownToolbarButton hinzu.
In den gleichen Fällen möchten Sie den Inhalt des Markdown -Editors nach dem ersten Init aktualisieren, beispielsweise weil Ihre Anwendung den Wert von einer API lesen muss und es Zeit braucht. Dazu müssen Sie dem MarkdownEditor einen ref hinzufügen und ihn dann wie SetValueAsync folgenden Code verwenden
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
Um der Komponente weitere Funktionen hinzuzufügen, enthält es die Version von mermaid.js 10.2.1, mit der beeindruckende Diagramme und Diagramme in der Markdown -Komponente wie möglich hinzugefügt werden können
Um diese Funktionalität dem Markdown -Editor hinzuzufügen, reicht es aus, das Skript in den index.html zu fügen.html
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >Das Skript prüft, ob diese Bibliothek aufgerufen wird. Wenn es zur Seite hinzugefügt wird, fügt der Markdown -Editor automatisch eine Schaltfläche in der Symbolleiste hinzu, um das Tag für die Meerjungfrau einzulegen. Das Tag ist
```mermaid
```
Verwenden dieses Skripts in der Komponente
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
oder die CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
Das Meerjungfrau -Render wird nicht funktionieren. Der Fehler ist
E. Replace ist keine Funktion
Ich empfehle also, das Skript mit dem neuen zu aktualisieren, wie ich im folgenden Absatz beschreibe.
host.html die neue Version von Meerjungfrau App.razor dem 10.9.1 zu index.html
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
Im Moment versuche ich, einen Weg zu finden, dieses Skript in den markdownEditor.js aufzunehmen, aber ich bin mir nicht sicher, ob es funktionieren wird.
### An example of the mermaid graphs
A ** Sequence diagram ** is an interaction diagram that shows how processes operate with one another and in what order .Sequenzyagram Alice->> John: Hallo John, wie geht es dir? John->> Alice: Großartig! Alice-) John: Bis später!
A **Gantt chart** is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
Gantt Titel A Gantt Diagram DateFormat Yyyy-MM-DD-Abschnitt Abschnitt A Aufgabe: A1, 2014-01-01, 30d Eine weitere Aufgabe: Nach A1, 20d Abschnitt eine weitere Aufgabe in Abschnitt 2014-01-12, 12d eine weitere Aufgabe: 24d
An **entity–relationship model** (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).
Erdiagram-Kunde || --o {order: Plätze Order ||-| {Line-Item: Enthält Kunde} | .. | {Lieferanlage: Verwendungsanlagen
## Add Highlight.js
This script is not included in the component but the component can detect if _Highlight.js_ is loaded. In this case, the Markdown Editor renders also the code in one of the supported languages.
To enable this function, add the script in your project and then in the `index.html` add the following lines
Wenn beide Bibliotheken im index.html geladen sind, funktioniert das Mermaid -Render nicht.
Im Markdown gibt es einige fehlende Tags, die einige nützliche Informationen auf der Seite wie eine Highlight -Note, einen Tipp, eine Warnung oder eine Aufmerksamkeitsnachricht anzeigen. Also habe ich sie in diesem Markdown -Editor hinzugefügt. Ein Beispiel für das Ergebnis dieser Implementierung ist im folgenden Screenshot.
Um die Nachricht hinzuzufügen, klicken Sie auf die Symbole in der Symbolleiste im Editor oder fügen Sie folgende Befehle hinzu:
| Befehl | Farbe | Beschreibung |
|---|---|---|
| `` `att | Rot | Zeigen Sie eine Aufmerksamkeitsnachricht an |
| `` `Note | Azurblau | Fügen Sie im Dokument eine Notiz hinzu |
| `` `Tipp | Grün | Zeigt eine Tippnachricht an |
| `` `warnen | Orange | Dies ist eine Warnmeldung |
In der Markdown -Editor -Komponente befindet sich ein CSS für die genannten alert.css und Sie können ihn mit dieser Zeile dem index.html hinzufügen, wenn Sie den markdowneditor.css nicht hinzufügen
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
Standardmäßig speichert der Markdown -Editor den Text im lokalen Speicher in Browser.
Das AutoSaveEnabled ist True und das AutoSaveSubmitDelay ist bis zu 5000 Millisekunden eingerichtet. Dies bedeutet, dass der Text alle 5 Sekunden gespeichert wird.
Wenn Sie den gespeicherten Text reinigen möchten, können Sie den folgenden Code verwenden
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
Im Markdown -Editor können Sie ein Video in den Text hinzufügen. Das Video kann von YouTube, Vimeo oder einem anderen Videoanbieter stammen. Das Video wird im Editor und im gerenderten HTML -Code angezeigt.
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
Der Markdown -Editor für Blazor verfügt über eine estimierte Sammlung von Eigenschaften, um alle Funktionen in der JavaScript -Version zuzuordnen. In diesem Repository gibt es 2 Projekte:
Index.razor , in dem ich zeige, wie die Komponente mit den grundlegenden Funktionen und Upload.razor verwendet wird, der zeigt, wie Sie mit dem Bild -Upload fertig werden. Um das Upload zu testen, muss das Projekt MarkdownEditorDemo.Api ausgeführt werden| Name | Beschreibung | Typ | Standard |
|---|---|---|---|
| Autosaveenabled | Ruft oder legt die Einstellung für das automatische Speichern ab oder setzt oder legt sie fest. Speichert den Text, der geschrieben wird, und wird ihn in Zukunft zurückladen. Es wird den Text vergessen, wenn das Formular, in dem es enthalten ist, eingereicht wird. Empfohlen, einen eindeutigen ID für den Markdown -Editor auszuwählen. | bool | FALSCH |
| Autosaveid | Erhält oder legt die automatische Save -Kennung ab. Sie müssen eine eindeutige String -Kennung festlegen, damit die Komponente autosave kann. Etwas, das dies von anderen Fällen der Komponente an anderer Stelle auf Ihrer Website unterscheidet. | Saite | Standardwert |
| Autosavedelay | Verzögerung zwischen Paraden in Millisekunden. Standardeinstellung auf 10000 (10s). | int | 10000 (10s) |
| AutosAvesubmitdelay | Verzögerung vor der Annahme, dass das Formular die Subjekte in Millisekunden fehlgeschlagen und den Text gerettet hat. | int | 5000 (5s) |
| AutosaveText | Text für Autosave | Saite | Autosasped: |
| Autosavetimeformatlocale | Legen Sie das Format für die angezeigte DateTime fest. Weitere Informationen finden Sie in den JavaScript -Dokumentationsdatetenformat -Instanzen | Saite | en-us |
| Autosavetimeformatyear | Stellen Sie das Format für das Jahr fest | Saite | numerisch |
| Autosavetimesformatmonth | Stellen Sie das Format für den Monat fest | Saite | lang |
| AUTOSAVETIMEFORMATDAY | Stellen Sie das Format für den Tag fest | Saite | 2-stellig |
| Autosavetimesformathour | Stellen Sie das Format für eine Stunde ein | Saite | 2-stellig |
| Autosavetimeformatminute | Stellen Sie das Format für die Minute ein | Saite | 2-stellig |
| Autodownloadfontawesome | Wenn Sie auf True gesetzt sind, können Sie die Schriftart fantastisch erzwingen (für Symbole verwendet). Wenn Sie auf False eingestellt sind, verhindert das Herunterladen. | bool? | NULL |
| CharakterenStatusttext | Legen Sie die Wörter fest, die in der Statusbuch für die Zählung des Charakters angezeigt werden sollen | Saite | characters: |
| CustomButtonclicked | Tritt auf, nachdem die benutzerdefinierte Symbolleiste -Schaltfläche geklickt wurde. | Eventcallback | |
| CustomImageUpload | Legt einen benutzerdefinierten Bild -Upload -Handler fest | ||
| Richtung | RTL oder LTR. Ändert die Textrichtung, um die Sprachen von Recht nach links zu unterstützen. Standardeinstellung zu LTR. | Saite | ltr |
| Errormessages | Fehler, die dem Benutzer mit der Option "ERRORCALLBACK) angezeigt werden, wobei Image_Name , Image_size und Image_Max_Size durch ihre jeweiligen Werte ersetzt werden, die für die Anpassung oder Internationalisierung verwendet werden können. | Markdownerrormessages | |
| Hideicons | Eine Reihe von Symbolnamen zum Verstecken. Kann verwendet werden, um bestimmte Symbole auszublenden, die standardmäßig angezeigt werden, ohne die Symbolleiste vollständig anzupassen. | String [] | "Seite an Seite", "Vollbild" |
| Imagebildung | Eine von Kommas getrennte Liste von MIME-Typen, die zum Überprüfen des Bildtyps vor dem Upload verwendet werden (Hinweis: Niemals den Client vertrauen und die Dateitypen immer auf der Server-Seite überprüfen). Standardeinstellungen zu Bild/PNG, Image/JPEG, Image/JPG, Image.gif. | Saite | Bild/PNG, Bild/JPEG, Bild/JPG, Image.gif |
| ImageCsrftoken | CSRF -Token mit Ajax Call zum Hochladen im Bild. Zum Beispiel mit Django -Backend verwendet. | Saite | |
| Imagemaxsize | Maximale Bildgröße in Bytes, vor dem Upload überprüft (Hinweis: Niemals den Client vertrauen, die Bildgröße immer auf der serverseitigen Überprüfung überprüfen). Standardeinstellungen zu 1024 * 1024 * 2 (2 MB). | lang | 1024 * 1024 * 2 (2 MB) |
| ImagePadabsolute | Wenn Sie auf True gesetzt sind, behandeln Sie ImageRl von ImageUploadfunction und Filepath von ImageUploadendpoint als absolutes als einen relativen Pfad zurück, dh keine Fenster.location.origin darauf vorbereiten. | Saite | |
| Imagetexte | Texte, die dem Benutzer (hauptsächlich in der Statusleiste) angezeigt werden, um die Funktion zu importieren, wobei Image_Name , Image_size und Image_MAX_SIZE durch ihre jeweiligen Werte ersetzt werden, die zur Anpassung oder Internationalisierung verwendet werden können. | Markdownimagetexte | NULL |
| ImageUploadAuthenticationChema | Wenn eine Authentifizierung für die API erforderlich ist, weisen Sie dieser Eigenschaft das zu verwendende Schema zu. Bearer ist der gemeinsame. | Saite | leer |
| ImageUploadAuthenticationToken | Wenn eine Authentifizierung für die API erforderlich ist, weisen Sie dieser Eigenschaft das Token zu | Saite | leer |
| Leinenzahl | Wenn Sie auf True gesetzt sind, aktivieren Sie Zeilennummern im Editor. | bool | FALSCH |
| Linesstatustxt | Legen Sie die Wörter fest, die in der Statusbuch für die Zählung der Zeile angezeigt werden sollen | Saite | lines: |
| Zeilenwrappung | Wenn Sie auf False eingestellt sind, deaktivieren Sie die Zeilenverpackung. Standardmäßig true. | bool | FALSCH |
| Markdownurl | Stellen Sie die URL für den Markdown -Handbuch ein. | Link zum Markdown -Handbuch | |
| MaxHeight | Legt feste Höhe für den Kompositionsbereich fest. Die Minho -Option wird ignoriert. Sollte eine Zeichenfolge sein, die einen gültigen CSS -Wert wie "500px" enthält. Standardeinstellungen zu undefiniert. | Saite | |
| MaxUploadimAgemessageSize | Ruft oder legt die maximale Nachrichtengröße beim Hochladen der Datei ab. | lang | 20 * 1024 |
| Minheight | Legt die Mindesthöhe für den Kompositionsbereich fest, bevor sie mit dem automatischen Wachstum beginnt. Sollte eine Zeichenfolge sein, die einen gültigen CSS -Wert wie "500px" enthält. Standardeinstellungen zu "300px". | Saite | 300px |
| NativeSpellChecker | Aktivieren Sie (wahr) oder deaktivieren Sie (false) den Rechtschreibprüfung im Editor | bool | WAHR |
| Platzhalter | Wenn festgelegt, zeigt eine benutzerdefinierte Platzhaltermeldung an. | Saite | NULL |
| SegmentfetchTimeout | Ruft das Segment beim Hochladen der Datei ab oder legt das Segment ab. | Zeitspanner | 1 min |
| Showicons | Eine Reihe von Symbolnamen zu zeigen. Kann verwendet werden, um bestimmte Symbole anzuzeigen, die standardmäßig versteckt sind, ohne die Symbolleiste vollständig anzupassen. | String [] | 'Code', 'Tabelle' |
| Zauberer | Aktivieren Sie (wahr) oder deaktivieren Sie (false) den Rechtschreibprüfung im Editor | bool | WAHR |
| Tabse | Wenn Sie festgelegt sind, passen Sie die Registerkartengröße an. Standardmäßig 2. | int | 2 |
| Thema | Das Thema überschreiben. Verzug nach Easymde. | Saite | Easymde |
| Symbolleiste | [Optional] erhält oder legt den Inhalt der Symbolleiste ab. | Renderfragment | |
| ToolBartips | Wenn Sie auf False eingestellt sind, deaktivieren Sie die Tipps zur Symbolleiste. Standardmäßig true. | bool | WAHR |
| Uploadimage | Wenn Sie auf True gesetzt sind, können Sie die Image-Upload-Funktionalität ermöglicht, die durch Drag-Drop, Kopieren und durch das Fenster "Durchbrowse-Datei" ausgelöst werden kann (geöffnet, wenn der Benutzer auf das Symbol Upload-Image klickt). Standardmäßig falsch. | bool | FALSCH |
| Wert | Erhält oder legt den Markdown -Wert ab. | Saite | NULL |
| ValueHtml | Ruft die HTML vom Markdown -Wert ab. | Saite | NULL |
| WordStatusttext | Legen Sie die Wörter fest, die in der Statusbuch für die Zählung des Wortes angezeigt werden sollen | Saite | words: |
| Name | Beschreibung | Typ |
|---|---|---|
| Fehlercallback | Eine Rückruffunktion, mit der definiert wird, wie eine Fehlermeldung angezeigt wird. Standardmäßig (errormessage) => alarm (errorRrormessage). | Func <String, Aufgabe> |
| ImageUploadChanged | Tritt jedes Mal auf, wenn sich das ausgewählte Bild verändert hat. | Func <FilechangeDeVentargs, Aufgabe> |
| ImageUploaded | Tritt auf, wenn ein individuelles Bild -Upload beendet ist. | Func <FileDedEventArgs, Aufgabe> |
| ImageUploadendPoint | Der Endpunkt, an dem die Bilderdaten über eine asynchrone Postanforderung gesendet werden. Der Server soll dieses Bild speichern und eine JSON -Antwort zurückgeben. | Saite |
| ImageUploadProgramm | Benachrichtigt den Fortschritt des Bildes, das in den Zielstrom geschrieben wird. | Func <FilepressEventargs, Aufgabe> |
| ImageUploadStarted | Tritt auf, wenn ein individuelles Bild -Upload begonnen hat. | Func <FilestartedEventArgs, Aufgabe> |
| Wertschichtig | Ein Ereignis, das nach dem Markenwert geändert hat. | Eventcallback |
| ValueHtmlChanged | Ein Ereignis, das nach der Änderung des Markdown -Werts und des neuen HTML -Codes verfügbar ist. | Eventcallback |
Der Markdown -Editor für Blazor kann sich um das Hochladen einer Datei kümmern und den relativen Markdown -Code in den Editor hinzufügen. Dafür muss die Immobilien UploadImage auf true festlegen. Außerdem muss die Upload -API im Eigenschafts ImageUploadEndpoint angegeben werden. In einigen Fällen erfordert die API eine Authentifizierung. Mit den Eigenschaften ImageUploadAuthenticationSchema und ImageUploadAuthenticationToken können Sie das richtige Schema und Token übergeben, das Sie im Anruf verwenden können.
Diese Werte werden der HttpClient POST im Header hinzugefügt. Nur wenn beide Eigenschaften nicht null sind, werden sie dem Kopfzeile hinzugefügt.
Wenn Sie besser verstehen möchten, wie Sie die API für das Upload erstellen, habe ich einen bestimmten Beitrag auf PuresourceCode erstellt.
Im Folgenden finden Sie die integrierten Symbolleistensymbole (von denen nur einige standardmäßig aktiviert sind), die nach wie vor neu organisiert werden können. "Name" ist der Name des Symbols, auf das im JS verwiesen wird. "Aktion" ist entweder eine Funktion oder eine URL zum Öffnen. "Klasse" ist die Klasse, die dem Symbol gegeben wird. "Tooltip" ist das kleine Tooltip, das über das Attribut title="" angezeigt wird. Beachten Sie, dass Tankcut-Hinweise automatisch hinzugefügt werden und die angegebene Aktion widerspiegeln, wenn eine Schlüsselbindung zugewiesen ist (dh mit dem Wert der action , der auf bold gedruckt ist und den von tooltip auf Bold gedruckt ist, ist der endgültige Text, den der Benutzer sehen wird, "fett (ctrl-b)").
Zusätzlich können Sie einen Trennzeichen zwischen den gesamten Symbolen hinzufügen, indem Sie "|" zum Symbolleistenarray.
| Name | Aktion | Tooltip Klasse |
|---|---|---|
| deutlich | ToggleBold | Deutlich fa fa-bold |
| kursiv | Toggleitalic | Kursiv fa fa-iT |
| Schlägen | Togglestrikenaughrough | Schlägen fa fa-Strikethrough |
| Überschrift | ToggleHeadingsmaller | Überschrift Fa Fa-Header |
| Übergangsmesser | ToggleHeadingsmaller | Kleinere Überschrift Fa Fa-Header |
| Koffer-Bigger | ToggleHeadingBigger | Größere Überschrift FA FA-LG FA-Header |
| Überschrift-1 | Toggleheading1 | Große Überschrift FA FA-Header-Header-1 |
| Überschrift-2 | ToggleHeading2 | Mittelgroße Überschrift FA FA-Header-Header-2 |
| Überschrift 3 | Toggleheading3 | Kleine Überschrift FA FA-Header-Header-3 |
| Code | ToggleCodeblock | Code fa fa-code |
| Zitat | ToggleBlockquote | Zitat fa fa-links |
| nicht ordnungsgemäße Liste | ToggleunorderedList | Generische Liste fa fa-list-ul |
| Auftragsliste | ToggleorderedList | Nummerierte Liste fa fa-list-ol |
| Reinigungsblock | CleanBlock | Block sauber fa fa-eraser |
| Link | Drawlink | Verknüpfung erstellen fa fa-link |
| Bild | Zeichnen | Bild einfügen fa fa-st-stell-o |
| Tisch | kassierbar | Tabelle einfügen fa fa-table |
| Horizontalregel | Drawhorizontalrule | Führen Sie die horizontale Linie ein fa fa-minus |
| Vorschau | TogglePreview | Vorschau umschalten fa fa-eye nicht nachweisbar |
| Seite an Seite | TogglesideByside | Seite an Seite umschalten FA FA-SO-Spalten No-Disable No-Mobile |
| Vollbild | Togglefulcreen | Vollbildschaltung umschalten fa fa-arrrows-Alt-No-Disable No-Mobile |
| Führung | Dieser Link | Markdown -Handbuch Fa Fa-Question-Kreis |
Easymde verfügt über eine Reihe vordefinierter Tastaturverknüpfungen, kann jedoch mit einer Konfigurationsoption verändert werden. Die Liste der Standardliste lautet wie folgt:
| Verknüpfung (Windows / Linux) | Verknüpfung (macOS) | Aktion |
|---|---|---|
| Strl- ' | Cmd- ' | "ToggleBlockquote" |
| Strg-B | CMD-B | "ToggleBold" |
| Strg-e | CMD-e | "CleanBlock" |
| Strg-H | CMD-H | "ToggleHeadingsmaller" |
| Strg-i | Cmd-i | "Toggleitalic" |
| Strg-k | CMD-K | "Drawlink" |
| Strg-l | CMD-L | "ToggleunorderedList" |
| Strg-P | CMD-P | "TogglePreview" |
| Strg-Alt-C | CMD-Alt-C | "ToggleCodeblock" |
| Strg-Alt-i | Cmd-Alt-i | "Drawimage" |
| Strg-Alt-L | CMD-Alt-L | "ToggleorderedList" |
| Shift-Ctrg-H | Shift-CMD-H | "ToggleHeadingBigger" |
| F9 | F9 | "TogglesideByside" |
| F11 | F11 | "Togglefulscreen" |
Viele Leute haben mir die gleiche Frage geschickt. Meine Komponenten (Markdowneditor, DataTable, SVG -Symbol und andere, die Sie in meinem GitHub finden) sind Freeware.
Ich bitte Sie, auf eine der folgenden Arten zum Projekt beizutragen:
Wenn Sie nicht wissen, wie es geht oder Sie:
Dann können Sie eine der Support -Lizenz kaufen, die ich erstellt habe. Es gibt verschiedene Preise. Der Betrag ist Ihre Entscheidung. Sie finden eine vollständige Liste im PuresourceCode Shop
Der Beitrag gibt Ihnen:
| Komponentenname | Forum | Beschreibung |
|---|---|---|
| DataTable für Blazor | Forum | DataTable -Komponente für Blazor WebAssembly und Blazor Server |
| Markdown -Editor für Blazor | Forum | Dies ist ein Markdown -Editor für den Einsatz in Blazor. Es enthält eine Live -Vorschau sowie ein eingebettetes Hilfsleitfaden für Benutzer. |
| Browser -Erkennung für Blazor | Forum | Browser Erkennung für Blazor WebAssembly und Blazor Server |
| CodesNipper für Blazor | Forum | Fügen Sie Code -Snippet in Ihre Blazor -Seiten für 196 Programmiersprachen mit 243 Stilen hinzu |
| Kopieren Sie in die Zwischenablage | Forum | Fügen Sie eine Schaltfläche hinzu, um Text im Clipbord zu kopieren |
| SVG -Symbole und Flaggen für Blazor | Forum | Bibliothek mit vielen SVG -Symbolen und SVG -Flags, die auf Ihren Rasierseiten verwendet werden können |
| Modal Dialog für Blazor | Forum | Einfacher modaler Dialog für Blazor WebAssembly |
| Psc.extensions | Forum | Viele Funktionen für .NET5 in einem Nuget -Paket, das Sie kostenlos herunterladen können. Wir haben in diesen Paketfunktionen für die tägliche Arbeit gesammelt, um Ihnen bei Anspruch, Strings, Enums, Datum und Uhrzeit zu helfen ... Ausdrücke ... |
| Feder für Blazor | Forum | Die Quill -Komponente ist eine benutzerdefinierte Wiederverwendungssteuerung, mit der wir die Feder problemlos konsumieren und mehrere Instanzen davon auf einer einzelnen Seite in unserer Blazor -Anwendung platzieren können |
| Segment für Blazor | Forum | Dies ist eine Segmentkomponente für Blazor Web Assembly und Blazor Server |
| Registerkarten für Blazor | Forum | Dies ist eine Registerkartenkomponente für Blazor Web Assembly und Blazor Server |
| Weltmap für Blazor | Forum | Zeigen Sie World Maps mit Ihren Daten |
