BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
Il s'agit d'un composant d'éditeur Markdown pour Blazor WebAssembly et Blazor Server avec .NET8. Le composant est basé sur Easymde version 1.0.x pour créer l'éditeur. J'ai décidé de créer mon référentiel pour la bibliothèque JavaScript car je voulais contrôler les mises à jour et les modifications. Le composant est un wrapper autour de la bibliothèque JavaScript et c'est un composant Blazor qui vous permet d'utiliser l'éditeur de Markdown dans votre application Blazor.
Pour plus de documentation et aidez ce composant, visitez le post que j'ai créé ici.
Essayez Markdown Editor en ligne (le téléchargement n'est pas activé)
Ajoutez l'éditeur à votre _Imports.razor
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
Ensuite, dans votre index.html , host.html ou App.razor ajoutez ces lignes:
<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>
N'oubliez pas que jQuery est également nécessaire. Le composant contient le script Easy Markdown Editor version 1.0.x qui est également maintenu par moi-même. Vous pouvez ajouter ce script dans votre projet, mais si vous utilisez le script dans le composant, vous êtes sûr qu'il fonctionne bien et toutes les fonctionnalités sont testées.
Le CSS markdowneditor.css contient le style de même des nouvelles balises que j'ai ajoutées dans l'éditeur de Markdown tel que att , note , tip , warn et video .
Dans une page Razor , nous pouvons ajouter le composant avec ces lignes
<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;
}
}
Le principal différent entre value et ValueHTMLChanged est que Value renvoie le texte écrit dans l'éditeur sous forme de chaîne tandis que ValueHTMLChanged renvoie le code HTML rendu pour le texte. La ValueHTMLChanged comprend le code pour afficher les graphiques de sirène dans une balise SVG .
Le résultat est un bel éditeur Markdown comme dans la capture d'écran suivante. Il s'agit d'une capture d'écran de la démo dans ce référentiel.
Dans votre éditeur de Markdown, ajoutez le code suivant
<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;
}
}
Dans la balise MarkdownEditor , vous ajoutez la nouvelle Toolbar d'onglet qui contient un ou plusieurs MarkdownToolbarButton .
Chaque MarkdownToolbarButton peut avoir une des Action par défaut (voir le tableau ci-dessous) ou une valeur personnalisée par exemple un lien vers un site Web. Si vous souhaitez afficher avant un MarkdownToolbarButton une ligne verticale, ajoutez le Separator de propriétés dans le MarkdownToolbarButton .
Dans les mêmes cas, vous souhaitez actualiser le contenu de l'éditeur de Markdown après la première init, par exemple, car votre application doit lire la valeur d'une API et cela prend du temps. Pour cela, vous devez ajouter un ref au MarkdownEditor , puis l'utiliser pour appeler SetValueAsync , comme dans le code suivant
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
Afin d'ajouter plus de fonctions au composant, il inclut la version de sirmaid.js 10.2.1 qui permet d'ajouter des diagrammes et un graphique impressionnants dans le composant Markdown comme
Pour ajouter cette fonctionnalité à l'éditeur de Markdown, il suffit d'ajouter l' index.html ce script
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >Le script vérifiera si cette bibliothèque est appelée. S'il est ajouté à la page, l'éditeur Markdown ajoutera automatiquement un bouton dans la barre d'outils pour insérer la balise pour la sirène. Cette balise est
```mermaid
```
En utilisant ce script dans le composant
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
ou le CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
Le rendu de sirène ne fonctionnera pas. L'erreur est
e.replace n'est pas une fonction
Donc, je recommande de mettre à niveau le script avec le nouveau comme je le décris dans le paragraphe suivant.
L'utilisation de la nouvelle version de Mermaid du 10.9.1 nécessite d'ajouter ce code dans index.html , host.html ou App.razor
<script type="module">
import mermaid
from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
Pour le moment, j'essaie de trouver un moyen d'inclure ce script dans markdownEditor.js mais je ne suis pas sûr que cela fonctionnera.
### 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 .Séquencédiagram Alice - >> John: Bonjour John, comment vas-tu? John - >> Alice: Super! Alice-) John: A plus tard!
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 Titre A Gantt Diagram DateFormat Yyyy-mm-dd Section Section A Tâche: A1, 2014-01-01, 30D Autre tâche: Après A1, section 20D Une autre tâche dans SEC: 2014-01-12, 12d une autre tâche: 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 Customer || --o {Order: Place Order || - | {Line-Item: Contient le client} | .. | {Address de livraison: Utilisation
## 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
Si les deux bibliothèques sont chargées dans l' index.html , le rendu de sirène ne fonctionnera pas.
Dans la marque, il y a des balises manquantes pour afficher des informations utiles sur la page comme une note de surbrillance, une astuce, un avertissement ou un message d'attention. Donc, je les ai ajoutés dans cet éditeur de Markdown. Un exemple du résultat de cette implémentation est dans la capture d'écran suivante.
Pour ajouter le message, cliquez sur les icônes de la barre d'outils de l'éditeur ou ajoutez ces commandes:
| Commande | Couleur | Description |
|---|---|---|
| `` `ATT | Rouge | Afficher un message d'attention |
| `` `note | Azuré | Ajouter une note dans le document |
| `` Astuce | Vert | Affiche un message de pourboire |
| `` `avertissant | Orange | Ceci est un message d'avertissement |
Dans le composant de l'éditeur de Markdown, il y a un CSS pour les eux appelé alert.css et vous pouvez l'ajouter à l' index.html avec cette ligne si vous n'avez pas ajouté le markdowneditor.css
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
Par défaut, l'éditeur Markdown enregistre le texte dans le stockage local du navigateur.
Le AutoSaveEnabled est True et l' AutoSaveSubmitDelay est configuré jusqu'à 5000 millisecondes. Cela signifie que le texte est enregistré toutes les 5 secondes.
Si vous souhaitez nettoyer le texte enregistré, vous pouvez utiliser le code suivant
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
Dans l'éditeur de Markdown, vous pouvez ajouter une vidéo dans le texte. La vidéo peut provenir de YouTube, Vimeo ou tout autre fournisseur de vidéos. La vidéo s'affiche dans l'éditeur et dans le code HTML rendu.
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
L'éditeur de Markdown pour Blazor a une collection étendu de propriétés pour cartographier toutes les fonctionnalités de la version JavaScript. Dans ce référentiel, il y a 2 projets:
Index.razor où je montre comment utiliser le composant avec les fonctions de base et Upload.razor qui montre comment faire face au téléchargement d'image. Pour tester le téléchargement, le projet MarkdownEditorDemo.Api doit s'exécuter| Nom | Description | Taper | Défaut |
|---|---|---|---|
| Automatiquement | Obtient ou définit le paramètre pour la sauvegarde automatique. Enregistre le texte qui est écrit et le chargera à l'avenir. Il oubliera le texte lorsque le formulaire dans lequel il est contenu est soumis. Recommandé de choisir un ID unique pour l'éditeur de Markdown. | bool | FAUX |
| Autosaveid | Obtient ou définit l'identifiant de sauvegarde automatique. Vous devez définir un identifiant de chaîne unique afin que le composant puisse être sur la vague automatique. Quelque chose qui sépare cela des autres cas du composant ailleurs sur votre site Web. | chaîne | Valeur par défaut |
| Autosavedelay | Retard entre les sauvegardes, en millisecondes. Par défaut à 10000 (10S). | int | 10000 (10s) |
| Autosavesubmitdelay | Retour avant de supposer que la soumission du formulaire a échoué et de sauver le texte, en millisecondes. | int | 5000 (5s) |
| AutosaveText | Texte pour la vague automatique | chaîne | Autosavé: |
| Autosavetimeformatlocale | Définissez le format pour l'affichage de DateTime. Pour plus d'informations, consultez les instances de documentation JavaScript DateTimeFormat | chaîne | en-us |
| AutosavetimeFormatyear | Définissez le format pour l'année | chaîne | numérique |
| AutosavetimeFormatmonth | Définissez le format pour le mois | chaîne | long |
| AutosavetimeFormatday | Définissez le format pour la journée | chaîne | À 2 chiffres |
| AutosavetimeFormathour | Définissez le format pour l'heure | chaîne | À 2 chiffres |
| AutosavetimeformatMinute | Définissez le format pour la minute | chaîne | À 2 chiffres |
| Autodownloadfontawesome | Si vous êtes défini sur true, forcer les téléchargements Font Awesome (utilisés pour les icônes). S'il est défini sur False, empêche le téléchargement. | bool? | nul |
| PersonnageStatustext | Définissez les mots à afficher dans la barre d'état pour le comptage du personnage | chaîne | characters: |
| CustombuttonClicked | Se produit après que le bouton de la barre d'outils personnalisée est cliqué. | EventCallback | |
| CustomImageUpload | Définit un gestionnaire de téléchargement d'image personnalisé | ||
| Direction | RTL ou LTR. Modifie la direction du texte pour prendre en charge les langues de droite à gauche. Par défaut à ltr. | chaîne | LTR |
| Déménagement des erreurs | Erreurs affichées à l'utilisateur, en utilisant l'option ErrorCallback, où Image_name , image_size et image_max_size sera remplacée par leurs valeurs respectives, qui peuvent être utilisées pour la personnalisation ou l'internationalisation. | MarkdowerrorMessages | |
| Hideicons | Un tableau de noms d'icônes à cacher. Peut être utilisé pour masquer des icônes spécifiques affichées par défaut sans personnaliser complètement la barre d'outils. | chaîne[] | «côte à côte», «plein écran» |
| Imaginer | Une liste de types de types séparées par des virgules utilisées pour vérifier le type d'image avant le téléchargement (Remarque: Ne faites jamais confiance au client, vérifiez toujours les types de fichiers à côté du serveur). Par défaut, Image / Png, image / jpeg, image / jpg, image.gif. | chaîne | image / png, image / jpeg, image / jpg, image.gif |
| Imagecsrftoken | Jeton CSRF à inclure avec l'appel Ajax pour télécharger l'image. Par exemple, utilisé avec Django Backend. | chaîne | |
| ImageMaxSize | Taille d'image maximale dans les octets, vérifiée avant le téléchargement (Remarque: Ne faites jamais confiance au client, vérifiez toujours la taille de l'image au côté du serveur). Par défaut, 1024 * 1024 * 2 (2 Mo). | long | 1024 * 1024 * 2 (2 Mo) |
| ImagePathabsolute | S'il est défini sur true, traitera ImageUrl à partir de ImageUploadFunction et FilePath renvoyé de ImageUploadEndPoint en tant que chemin absolu plutôt que relatif, c'est-à-dire pasfred window.location.origin. | chaîne | |
| Immersexts | Les textes affichés à l'utilisateur (principalement sur la barre d'état) pour la fonction d'image d'importation, où Image_name , image_size et image_max_size seront remplacés par leurs valeurs respectives, qui peuvent être utilisées pour la personnalisation ou l'internationalisation. | MarkdowmageTexts | nul |
| ImageUploadAuthenticationsChema | Si une authentification pour l'API est requise, attribuez à cette propriété le schéma à utiliser. Bearer est le commun. | chaîne | vide |
| ImageUploadAuthenticationToken | Si une authentification pour l'API est requise, attribuez à cette propriété le jeton | chaîne | vide |
| Linnumbers | S'il est défini sur true, permet les numéros de ligne dans l'éditeur. | bool | FAUX |
| Lissetatustext | Définissez les mots à afficher dans la barre d'état pour le comptage de la ligne | chaîne | lines: |
| Écriture de lignes | Si vous êtes défini sur False, désactivez l'enveloppement de ligne. Par défaut est vrai. | bool | FAUX |
| Markdowurl | Définissez l'URL pour le guide Markdown. | Lien vers le guide de Markdown | |
| Maxheight | Ensemble la hauteur fixe pour la zone de composition. L'option Minheight sera ignorée. Devrait être une chaîne contenant une valeur CSS valide comme "500px". Par défaut est indéfini. | chaîne | |
| MaxuploadImageMessageSize | Obtient ou définit la taille du message maximum lors du téléchargement du fichier. | long | 20 * 1024 |
| Minheight | Définit la hauteur minimale de la zone de composition, avant de commencer la croissance automatique. Devrait être une chaîne contenant une valeur CSS valide comme "500px". Par défaut "300px". | chaîne | 300px |
| Indigène | Activer (vrai) ou désactiver (faux) la vérification orthographique dans l'éditeur | bool | Vrai |
| Espace réservé | S'il est défini, affiche un message personnalisé. | chaîne | nul |
| Segmentfetchtimeout | Obtient ou définit le délai d'expiration du segment lors du téléchargement du fichier. | Casse-temps | 1 min |
| Showicons | Un tableau de noms d'icônes à afficher. Peut être utilisé pour afficher des icônes spécifiques cachées par défaut sans personnaliser complètement la barre d'outils. | chaîne[] | 'Code', 'Table' |
| Correcteur orthographique | Activer (vrai) ou désactiver (faux) la vérification orthographique dans l'éditeur | bool | Vrai |
| Tabsice | Si définissez, personnalisez la taille de l'onglet. Par défaut est 2. | int | 2 |
| Thème | Remplacer le thème. Par défaut à easymde. | chaîne | easymde |
| Barre d'outils | [Facultatif] Obtient ou définit le contenu de la barre d'outils. | Rendu | |
| Bouchons d'outils | Si vous êtes défini sur False, désactivez les pointes du bouton de la barre d'outils. Par défaut est vrai. | bool | vrai |
| Uploadimage | S'il est défini sur true, permet aux fonctionnalités de téléchargement d'image, qui peuvent être déclenchées par glisser-glisser, copier-coller et via la fenêtre Browse-File (ouverte lorsque l'utilisateur clique sur l'icône de téléchargement-image). Par défaut est faux. | bool | FAUX |
| Valeur | Obtient ou définit la valeur de marque. | chaîne | nul |
| Valeurhtml | Obtient le HTML de la valeur de marque. | chaîne | nul |
| WordStatustext | Définissez les mots à afficher dans la barre d'état pour le comptage du mot | chaîne | words: |
| Nom | Description | Taper |
|---|---|---|
| ErrorCallback | Une fonction de rappel utilisée pour définir comment afficher un message d'erreur. Par défaut est (errorMessage) => alert (errorMessage). | Func <string, tâche> |
| ImageUploadChanged | Se produit chaque fois que l'image sélectionnée a changé. | Func <FileChangedEventArgs, tâche> |
| ImageUploadEnd | Se produit lorsqu'un téléchargement d'image individuel est terminé. | Func <fileendeventargs, tâche> |
| ImageUploadEndPoint | Le point de terminaison où les données d'images seront envoyées, via une demande de publication asynchrone. Le serveur est censé enregistrer cette image et renvoyer une réponse JSON. | chaîne |
| ImageUploadProgreresse | Informe la progression de l'image écrite dans le flux de destination. | Func <fileprogreressedEventArgs, tâche> |
| ImageUploadStarted | Se produit lorsqu'un téléchargement d'image individuel a commencé. | Func <FileStartedeventArgs, tâche> |
| Valorisé | Un événement qui se produit après la valeur de Markdown a changé. | EventCallback |
| Valeurhtmlchanged | Un événement qui se produit après la valeur de Markdown a changé et le nouveau code HTML est disponible. | EventCallback |
L'éditeur de Markdown de Blazor peut s'occuper de télécharger un fichier et d'ajouter le code de démarrage relatif dans l'éditeur. Pour cela, la propriété UploadImage doit se définir sur true . De plus, l'API de téléchargement doit être spécifiée dans la propriété ImageUploadEndpoint . Dans certains cas, l'API nécessite une authentification. Les propriétés ImageUploadAuthenticationSchema et ImageUploadAuthenticationToken vous permettent de passer le schéma et le jeton corrects à utiliser dans l'appel.
Ces valeurs seront ajoutées à la demande POST HttpClient dans l'en-tête. Seulement si les deux propriétés ne sont pas nulles, elles seront ajoutées à l'en-tête.
Si vous voulez mieux comprendre comment créer l'API pour le téléchargement, j'ai créé un article spécifique sur PURESOURCODODE.
Vous trouverez ci-dessous les icônes de la barre d'outils intégrées (dont certaines sont activées par défaut), qui peuvent être réorganisées comme vous le souhaitez. "Nom" est le nom de l'icône, référencé dans le js. "Action" est soit une fonction ou une URL à ouvrir. "Classe" est la classe donnée à l'icône. "Info-toolt" est la petite info-bulle qui apparaît via l'attribut title="" . Notez que les conseils de raccourci sont ajoutés automatiquement et reflètent l'action spécifiée si elle a une liaison clé qui lui est attribuée (c'est-à-dire avec la valeur d' action définie en bold et celle de tooltip Bold
De plus, vous pouvez ajouter un séparateur entre toutes les icônes en ajoutant "|" au tableau de la barre d'outils.
| Nom | Action | Infraction Classe |
|---|---|---|
| audacieux | faire un tourbillon | Audacieux FA FA BOLD |
| italique | togléital | Italique fa fa-italic |
| strikethrough | toglestrikethrough | Strikethrough fa fa fa-strikethrough |
| titre | faire basculer | Titre FA FA-HEDER |
| étalant | faire basculer | Pas plus petit FA FA-HEDER |
| tas | faire basculer | Plus grand titre FA FA-LG FA-Header |
| en tête-1 | Toggleheading1 | Grave FA FA-Header Header-1 |
| en tête-2 | Toggleheading2 | Tête moyen FA FA-Header Header-2 |
| En tête-3 | Toggleheading3 | Petit titre FA FA-Header Header-3 |
| code | togglecodeblock | Code fa fa fa fa-code |
| citation | togleblockquote | Citation fa fa-quote-left |
| liste non ordonnée | ToggleUnorderedlist | Liste générique fa fa-list-ul |
| liste d'ordre | Toggleorderedlist | Liste numérotée fa fa-list-ol |
| pâtisserie | couler | Bloc propre FA FA-ERASER |
| lien | lieur de liaisons | Créer un lien FA FA-LINK |
| image | étincelle | Insérer l'image fa fa-picture-o |
| tableau | à dessin | Table d'insertion FA FA-TABLE |
| règle horizontale | tire-borizontalrule | Insérer une ligne horizontale fa fa-minus |
| prévisualisation | togglepreview | Faire un aperçu fa faw-e-eye sans prévisible |
| côte à côte | toggleside | Basculer côte à côte fa FA-COLUMNS NON-DISABLE NO-MOBILE |
| plein écran | écran de bascule | Basculer en plein écran fa fa-arrows-alt non-disable no-mobile |
| guide | Ce lien | Guide de marque FA FA-QUESTION CIRCLE |
Easymde est livré avec un tableau de raccourcis clavier prédéfinis, mais ils peuvent être modifiés avec une option de configuration. La liste des par défaut est la suivante:
| Raccourci (Windows / Linux) | Raccourci (macOS) | Action |
|---|---|---|
| Ctrl- ' | Cmd- ' | "toggleblockquote" |
| Ctrl-b | Cmd-b | "Togglebold" |
| Ctrl-e | Cmd-e | "Cleanblock" |
| Ctrl-h | Cmd-h | "ToggleheadingsMaller" |
| Ctrl-i | Cmd-i | "toggléitalic" |
| Ctrl-k | Cmd-k | "lieur de liaison" |
| Ctrl-l | Cmd-l | "ToggleUnorderedlist" |
| Ctrl-p | Cmd-p | "togglepreview" |
| Ctrl-alt-c | Cmd-alt-c | "toggleCodeBlock" |
| Ctrl-alt-i | Cmd-alt-i | "Drawimage" |
| Ctrl-alt-l | Cmd-alt-l | "ToggleOrderEdlist" |
| Shift-ctrl-h | Shift-cmd-h | "Toggleheadingbigger" |
| F9 | F9 | "togglesidebyside" |
| F11 | F11 | "TogglefullScreen" |
Beaucoup de gens m'ont envoyé la même question. Mes composants (MarkDowdEditor, DataTable, SVG icône et autres que vous trouvez sur mon github) sont des logiciels gratuits.
Je vous demande de contribuer au projet de l'une des manières suivantes:
Si vous ne savez pas comment le faire ou vous:
Ensuite, vous pouvez acheter l'une des licences de soutien que j'ai créées. Il y a différents prix. Le montant est votre décision. Vous trouvez une liste complète sur PureSourCode Shop
La contribution vous donne:
| Nom du composant | Forum | Description |
|---|---|---|
| DataTable pour Blazor | Forum | Composant DataTable pour Blazor WebAssembly and Blazor Server |
| Éditeur de Markdown pour Blazor | Forum | Il s'agit d'un éditeur de Markdown à utiliser dans Blazor. Il contient un aperçu en direct ainsi qu'un guide d'aide intégré aux utilisateurs. |
| Détection du navigateur pour Blazor | Forum | Détection du navigateur pour Blazor WebAssembly and Blazor Server |
| Codesnipper pour le blazor | Forum | Ajoutez un extrait de code dans vos pages de blazor pour 196 langages de programmation avec 243 styles |
| Copier dans le presse-papiers | Forum | Ajouter un bouton pour copier du texte dans le clipbord |
| Icônes et drapeaux SVG pour Blazor | Forum | Bibliothèque avec beaucoup d'icônes SVG et de drapeaux SVG à utiliser dans vos pages de rasoir |
| Dialogue modale pour Blazor | Forum | Boîte de dialogue modale simple pour Blazor WebAssembly |
| PSCc.Extensions | Forum | Beaucoup de fonctions pour .NET5 dans un package NuGet que vous pouvez télécharger gratuitement. Nous avons collecté dans ce package des fonctions pour un travail quotidien pour vous aider avec la réclamation, les chaînes, les énumérements, la date et l'heure, les expressions ... |
| Quill pour le blazor | Forum | Le composant Quill est un contrôle réutilisable personnalisé qui nous permet de consommer facilement Quill et d'en placer plusieurs instances sur une seule page dans notre application Blazor |
| Segment pour Blazor | Forum | Il s'agit d'un composant de segment pour Blazor Web Assembly and Blazor Server |
| Onglets pour Blazor | Forum | Ceci est un composant Tabs pour Blazor Web Assembly and Blazor Server |
| WorldMap pour Blazor | Forum | Afficher les cartes mondiales avec vos données |
