BlazorMarkdownEditor
Rewrite the Markdown Editor for Blazor with EasyMDE
Este é um componente do editor de marcação para o Blazor WebAssembly e o Blazor Server com .NET8. O componente é baseado no Easymde versão 1.0.x para criar o editor. Decidi criar meu repositório para a biblioteca JavaScript porque queria ter controle sobre as atualizações e as alterações. O componente é um invólucro ao redor da biblioteca JavaScript e é um componente Blazor que permite usar o editor de marcação no seu aplicativo Blazor.
Para mais documentação e ajude este componente, visite o post que criei aqui.
Experimente o Editor de Markdown online (o upload não está ativado)
Adicione o editor ao seu _Imports.razor
@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs
Então, em seu index.html , host.html ou App.razor adicionar essas linhas:
<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>
Lembre -se de que jQuery também é necessário. O componente contém o script do Easy Markdown Editor versão 1.0.x que também é mantido sozinho. Você pode adicionar esse script ao seu projeto, mas se você usar o script no componente, tem certeza de que ele funciona bem e todas as funcionalidades serão testadas.
O CSS markdowneditor.css contém o estilo da mesma das novas tags que adicionei no editor de marcação, como att , note , tip , warn e video .
Em uma página Razor , podemos adicionar o componente com estas linhas
<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;
}
}
O principal diferente entre value e ValueHTMLChanged é que Value retorna o texto escrito no editor como uma string, enquanto ValueHTMLChanged retorna o código HTML renderizado para o texto. O ValueHTMLChanged inclui o código para exibir gráficos de sereia em uma tag SVG .
O resultado é um bom editor de marcação, como na captura de tela a seguir. Esta é uma captura de tela da demonstração neste repositório.
Em seu editor de marcação, adicione o seguinte código
<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;
}
}
No tag MarkdownEditor , você adiciona a nova Toolbar guia que contém um ou mais MarkdownToolbarButton .
Cada MarkdownToolbarButton pode ter uma das Action padrão (consulte a tabela abaixo) ou um valor personalizado, por exemplo, um link para um site. Se você deseja exibir antes de um MarkdownToolbarButton uma linha vertical, adicione o Separator de propriedades no MarkdownToolbarButton .
Nos mesmos casos, você deseja atualizar o conteúdo do Editor de Markdown após o primeiro INIT, por exemplo, porque seu aplicativo precisa ler o valor de uma API e leva tempo. Para isso SetValueAsync você deve adicionar MarkdownEditor ref
<MarkdownEditor @bind-Value="@markdownValue"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1" />
@code {
MarkdownEditor Markdown1;
// omitted code...
async Task ChangeText()
{
markdownValue = "Test!";
await Markdown1.SetValueAsync(markdownValue);
}
}
Para adicionar mais funções ao componente, inclui a versão do Mermaid.js 10.2.1 que permite adicionar diagramas e gráficos impressionantes no componente de remark
Para adicionar essa funcionalidade ao editor de marcação, é suficiente para adicionar o index.html Este script
< script src = "/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js" > </ script >O script verificará se esta biblioteca é chamada. Se for adicionado à página, o editor de marcação adicionará automaticamente um botão na barra de ferramentas para inserir a tag para sereia. Essa tag é
```mermaid
```
Usando este script no componente
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
ou o CDN
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
A renderização da sereia não funcionará. O erro é
E.Replace não é uma função
Então, eu recomendo atualizar o script com o novo, como descrevo no parágrafo a seguir.
O uso da nova versão da sereia do 10.9.1 requer a adição deste código no 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>
No momento, estou tentando encontrar uma maneira de incluir esse script no markdownEditor.js mas não tenho certeza de que funcionará.
### 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 .Sequenciado Alice->> John: Olá John, como você está? John->> Alice: Ótimo! Alice-) John: Até mais tarde!
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.
Título de Gantt Um Diagrama de Gantt DateFormatats Aaaaaa-mm-dd Seção A Tarefa: A1, 2014-01-01, 30d Outra tarefa: Após A1, 20d Seção Outra tarefa na seção: 2014-01-12, 12d Outra tarefa: 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 {Ordem: Locais Ordem ||-| {line-item: contém cliente} | .. | {entrega-address: usa
## 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
Se ambas as bibliotecas forem carregadas no index.html , a renderização da sereia não funcionará.
No Markdown, existem algumas tags ausentes para exibir algumas informações úteis na página, como uma nota de destaque, uma dica, um aviso ou uma mensagem de atenção. Então, eu os adicionei neste editor de Markdown. Um exemplo do resultado dessa implementação está na captura de tela a seguir.
Para adicionar a mensagem, clique nos ícones na barra de ferramentas no editor ou adicione esses comandos:
| Comando | Cor | Descrição |
|---|---|---|
| `` `ATT | Vermelho | Exibir uma mensagem de atenção |
| `` `Nota | Azure | Adicione uma nota no documento |
| `` `dica | Verde | Mostra uma mensagem de dica |
| `` Warn | Laranja | Esta é uma mensagem de aviso |
No componente Editor de Markdown, há um CSS para eles chamados alert.css e você pode adicioná -lo ao index.html com esta linha se você não adicionar o markdowneditor.css
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
Por padrão, o editor de Markdown salva o texto no armazenamento local do navegador.
O AutoSaveEnabled é True e o AutoSaveSubmitDelay é configurado até 5000 milissegundos. Isso significa que o texto é salvo a cada 5 segundos.
Se você deseja limpar o texto salvo, pode usar o seguinte código
<MarkdownEditor @bind-Value="@markdownValue" MaxHeight="300px"
ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
SpellChecker="false" @ref="Markdown1"
AutoSaveEnabled="true" />
@code {
MarkdownEditor Markdown1;
async Task DeleteStorage()
{
await Markdown1.CleanAutoSave();
}
}
No editor de marcação, você pode adicionar um vídeo no texto. O vídeo pode ser do YouTube, Vimeo ou qualquer outro provedor de vídeo. O vídeo é exibido no editor e no código HTML renderizado.
```video
https://www.youtube.com/shorts/JY1zFZgX6zM
```
O editor de Markdown do Blazor possui uma coleção estensa de propriedades para mapear todas as funcionalidades da versão JavaScript. Neste repositório, existem 2 projetos:
Index.razor onde mostro como usar o componente com as funções básicas e Upload.razor que mostra como lidar com o upload da imagem. Para testar o upload, o projeto MarkdownEditorDemo.Api deve ser executado| Nome | Descrição | Tipo | Padrão |
|---|---|---|---|
| AutoSaveEnabled | Obtém ou define a configuração para a economia automática. Salva o texto que está sendo escrito e o carregará de volta no futuro. Ele esquecerá o texto quando o formulário em que estiver contido for enviado. Recomendado para escolher um ID exclusivo para o Editor de Markdown. | bool | falso |
| AutoSaveID | Obtém ou define o identificador de salvamento automático. Você deve definir um identificador de string exclusivo para que o componente possa automaticamente. Algo que separa isso de outras instâncias do componente em outras partes do seu site. | corda | Valor padrão |
| AUTOSAVEDELAY | Atraso entre salvamentos, em milissegundos. Padrão para 10000 (10s). | int | 10000 (10s) |
| AUTOSAVESUBMITDELAY | Atraso antes de assumir que o envio do formulário falhou e salvando o texto, em milissegundos. | int | 5000 (5s) |
| AUTOSAVETEXT | Texto para automóveis | corda | AutoSaved: |
| AUTOSAVETIMEFORMATLOCALE | Defina o formato para o tempo de dados. Para mais informações, consulte a documentação JavaScript DatetimeFormat Instâncias | corda | en-us |
| AutoSaveTimeFormatyear | Defina o formato para o ano | corda | numérico |
| AUTOSAVETIMEFORMATOMONTH | Defina o formato para o mês | corda | longo |
| AutoSavetimeFormatday | Defina o formato para o dia | corda | 2 dígitos |
| AUTOSAVETIMEFORMATHOUR | Defina o formato para a hora | corda | 2 dígitos |
| AUTOSAVETIMEFORMATMINUTE | Defina o formato para o minuto | corda | 2 dígitos |
| AutoDownLoadFontawesome | Se definido como true, force download Font Awesome (usado para ícones). Se definido como false, impede o download. | bool? | nulo |
| CaracteresStatUSTUSTEXT | Defina as palavras a serem exibidas no statusbar para a contagem do personagem | corda | characters: |
| CustomButtonClicked | Ocorre depois que o botão da barra de ferramentas personalizado é clicado. | EventCallback | |
| CustomImageUpload | Define um manipulador de upload de imagem personalizado | ||
| Direção | RTL ou LTR. Altera a direção do texto para suportar linguagens da direita para a esquerda. Padrões para LTR. | corda | ltr |
| ErrorMessages | Os erros exibidos ao usuário, usando a opção ErrorCallback, onde Image_Name , Image_Size e Image_Max_Size serão substituídos por seus respectivos valores, que podem ser usados para personalização ou internacionalização. | MarkdownerRormessages | |
| Hideicons | Uma variedade de nomes de ícones a se esconder. Pode ser usado para ocultar ícones específicos mostrados por padrão sem personalizar completamente a barra de ferramentas. | corda[] | 'lado a lado', 'tela cheia' |
| ImageAccept | Uma lista separada por vírgula de tipos de mímica usados para verificar o tipo de imagem antes do upload (Nota: nunca confie no cliente, sempre verifique os tipos de arquivo no lado do servidor). Padrões para imagem/png, imagem/jpeg, imagem/jpg, imagem.gif. | corda | Image/png, imagem/jpeg, imagem/jpg, imagem.gif |
| Imagecsrftoken | Token CSRF para incluir com a chamada AJAX para fazer upload da imagem. Por exemplo, usado com o back -end do Django. | corda | |
| ImageMaxSize | Tamanho máximo da imagem em bytes, verificado antes do upload (Nota: nunca confie no cliente, sempre verifique o tamanho da imagem no lado do servidor). Padrões para 1024 * 1024 * 2 (2MB). | longo | 1024 * 1024 * 2 (2MB) |
| ImagePathabsolute | Se definido como true, tratará o ImageUrl a partir do ImageUploadFunction e FilePath retornados do ImageUploadendPoint como um caminho absoluto e não relativo, ou seja, não prenda window.Location.origin nele. | corda | |
| ImageTexts | Os textos exibidos ao usuário (principalmente na barra de status) para o recurso Importar imagem, onde image_name , image_size e image_max_size serão substituídos por seus respectivos valores, que podem ser usados para personalização ou internacionalização. | MarkdownImageTexts | nulo |
| ImageUploadauthenticationsChema | Se for necessária uma autenticação para a API, atribua a esta propriedade o esquema a ser usado. Bearer é o comum. | corda | vazio |
| ImageUploadaThenticationToken | Se for necessária uma autenticação para a API, atribua a esta propriedade o token | corda | vazio |
| Lineningbers | Se definido como true, ativa os números de linha no editor. | bool | falso |
| Linesstatustustext | Defina as palavras a serem exibidas no statusBar para a contagem da linha | corda | lines: |
| Palavra | Se definido como false, desative a embalagem de linhas. Padrões para True. | bool | falso |
| Markdownurl | Defina o URL para o guia de marcação. | Link para guia de marcação | |
| MaxHeight | Define altura fixa para a área de composição. A opção de peso será ignorada. Deve ser uma sequência contendo um valor CSS válido como "500px". Padrão para indefinido. | corda | |
| MaxuploadimageMessagesize | Obtém ou define o tamanho da mensagem máxima ao fazer o upload do arquivo. | longo | 20 * 1024 |
| MINHEIRO | Define a altura mínima para a área de composição, antes de iniciar o crescimento automático. Deve ser uma sequência contendo um valor CSS válido como "500px". Padrões para "300px". | corda | 300px |
| NativepellChecker | Ativar (verdadeiro) ou desativar (false) a verificação ortográfica do editor | bool | Verdadeiro |
| Espaço reservado | Se definido, exibe uma mensagem de espaço reservado personalizado. | corda | nulo |
| SegmentFetchTimeout | Obtém ou define o tempo limite do segmento ao fazer o upload do arquivo. | Timespan | 1 min |
| Showicons | Uma variedade de nomes de ícones para mostrar. Pode ser usado para mostrar ícones específicos ocultos por padrão sem personalizar completamente a barra de ferramentas. | corda[] | 'código', 'tabela' |
| Checker ortográfico | Ativar (verdadeiro) ou desativar (false) a verificação ortográfica do editor | bool | Verdadeiro |
| Tabsize | Se definido, personalize o tamanho da guia. Padrões para 2. | int | 2 |
| Tema | Substituir o tema. Padrões para Easymde. | corda | Easymde |
| Barra de ferramentas | [Opcional] Obtém ou define o conteúdo da barra de ferramentas. | Renderfragment | |
| Bartips de ferramentas | Se definido como False, desative as dicas do botão da barra de ferramentas. Padrões para True. | bool | verdadeiro |
| UploadImage | Se definido como true, permita a funcionalidade de upload da imagem, que pode ser acionada por arrasto-drop, copiar-se e através da janela de arquivos de navegação (aberto quando o usuário clicar no ícone de imagem de upload). Padrões para false. | bool | falso |
| Valor | Obtém ou define o valor da remarca. | corda | nulo |
| ValueHtml | Obtém o HTML do valor de remarca. | corda | nulo |
| Wordsstatatext | Defina as palavras a serem exibidas no statusbar para a contagem da palavra | corda | words: |
| Nome | Descrição | Tipo |
|---|---|---|
| ErrorCallback | Uma função de retorno de chamada usada para definir como exibir uma mensagem de erro. Padrões para (errorMessage) => alert (errorMessage). | Func <string, tarefa> |
| ImageUploadchanged | Ocorre sempre que a imagem selecionada mudou. | Func <fileChangedEventargs, tarefa> |
| ImageUploaded | Ocorre quando um upload de imagem individual termina. | Func <FileEnDeventArgs, tarefa> |
| ImageUploadendPoint | O terminal em que os dados de imagens serão enviados, através de uma solicitação de postagem assíncrona. O servidor deve salvar esta imagem e retornar uma resposta JSON. | corda |
| ImageUploadProgreded | Notifica o progresso da imagem que está sendo gravada no fluxo de destino. | Func <fileProgredesedEventArgs, tarefa> |
| ImageUpload iniciado | Ocorre quando um upload de imagem individual foi iniciado. | Func <FileStartEDeventArgs, tarefa> |
| Valuechangeed | Um evento que ocorre após o valor da rearneração mudou. | EventCallback |
| ValueHtmlChanged | Um evento que ocorre após o valor da rearneração alterado e o novo código HTML está disponível. | EventCallback |
O editor de Markdown do Blazor pode cuidar do upload de um arquivo e adicionar o código de marcação relativo no editor. Para isso, a propriedade UploadImage deve definir como true . Além disso, a API de upload deve ser especificada na propriedade ImageUploadEndpoint . Em alguns casos, a API requer uma autenticação. As propriedades ImageUploadAuthenticationSchema e ImageUploadAuthenticationToken permitem que você passe o esquema e o token corretos para usar na chamada.
Esses valores serão adicionados à solicitação POST HttpClient no cabeçalho. Somente se ambas as propriedades não forem nulas, elas serão adicionadas ao cabeçalho.
Se você quiser entender melhor como criar a API para o upload, criei uma postagem específica no PureRceCode.
Abaixo estão os ícones da barra de ferramentas embutidos (apenas alguns dos quais são ativados por padrão), que podem ser reorganizados como quiser. "Nome" é o nome do ícone, referenciado no JS. "Ação" é uma função ou um URL para abrir. "Classe" é a classe dada ao ícone. "Tooltip" é a pequena dica de ferramenta que aparece através do atributo title="" . Observe que as dicas de atalho são adicionadas automaticamente e refletem a ação especificada se tiver uma ligação de chave atribuída a ele (ou seja, com o valor da action definido como bold e o da tooltip definida como Bold , o texto final que o usuário verá seria "Bold (Ctrl-B)").
Além disso, você pode adicionar um separador entre qualquer ícones adicionando "|" para a matriz da barra de ferramentas.
| Nome | Ação | Dip de ferramenta Aula |
|---|---|---|
| audacioso | Togglebold | Audacioso fa fa bold |
| itálico | Toggleitalic | itálico fa fa-italic |
| Strikethrough | Togglestrikethrough | Strikethrough FA FA-Strikethrough |
| cabeçalho | ToggleHeadingsMaller | Cabeçalho FA FA-header |
| Cabeçando-mmaller | ToggleHeadingsMaller | Cabeçalho menor FA FA-header |
| Cabeçalho | Toggleheadingbigger | Título maior FA FA-LG FA-cabeçalho |
| cabeçalho-1 | ToggleHeading1 | Grande cabeçalho FA FA Header-1 |
| cabeçalho-2 | Toggleheading2 | Cabeçalho médio FA FA-cabeçalho-cabeçalho-2 |
| cabeçalho-3 | ToggleHeading3 | PEQUENO DE CHEFE FA FA Header-3 |
| código | TogGleCodeBlock | Código FA FA-Code |
| citar | ToggleBlockQuote | Citar FA FA-Quote-Left |
| Lista não ordenada | ToggleunOrderEdList | Lista genérica FA FA-List-ul |
| Lista ordenada | ToggleOrderEdList | Lista numerada FA FA-LIST-OL |
| Bloco limpo | Limpeblock | Bloco limpo FA FA-ERASER |
| link | Drawlink | Criar link fa fa-link |
| imagem | drawimage | Insira a imagem FA FA-PICTURE-O |
| mesa | drawTable | Inserir tabela FA FA-Table |
| regra horizontal | Definência | Insira a linha horizontal FA FA-Minus |
| visualização | TogglePreview | Tomar visualização FA FA-Eye não-discreto |
| lado a lado | TogglesideByside | Alternar lado a lado FA FA-Columns sem-discreto |
| tela cheia | TogglefullScreen | Alternar a tela cheia FA fa-arrows-alt não-discreto |
| guia | Este link | Guia de marcação Círculo de perguntas fa FA |
O Easymde vem com uma variedade de atalhos de teclado predefinidos, mas eles podem ser alterados com uma opção de configuração. A lista dos padrão é a seguinte:
| Atalho (Windows / Linux) | Atalho (macOS) | Ação |
|---|---|---|
| Ctrl- ' | Cmd- ' | "ToggleBlockQuote" |
| Ctrl-B | Cmd-b | "Togglebold" |
| Ctrl-e | Cmd-e | "Cleanblock" |
| Ctrl-H | Cmd-h | "ToggleHeadingsmaller" |
| Ctrl-i | Cmd-i | "Toggleitalic" |
| Ctrl-k | Cmd-k | "Drawlink" |
| 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" |
Muitas pessoas me enviaram a mesma pergunta. Meus componentes (MarkdownEditor, Datatable, SVG Icon e outros que você encontra no meu github) são freeware.
Peço que você contribua para o projeto de uma das seguintes maneiras:
Se você não sabe como fazer isso ou você:
Em seguida, você pode comprar uma das licenças de suporte que criei. Existem preços diferentes. O valor é sua decisão. Você encontra uma lista completa na loja PureRceCode
A contribuição lhe dá:
| Nome do componente | Fórum | Descrição |
|---|---|---|
| DataTable para Blazor | Fórum | Componente Datatable para Blazor WebAssembly e Blazor Server |
| Editor de Markdown para Blazor | Fórum | Este é um editor de marcação para uso no Blazor. Ele contém uma visualização ao vivo, bem como um guia de ajuda incorporado para os usuários. |
| Detecto de navegador para Blazor | Fórum | Detectar o navegador para o Blazor WebAssembly e Blazor Server |
| Codesnipper para Blazor | Fórum | Adicione trechos de código em suas páginas de blazor para 196 linguagens de programação com 243 estilos |
| Cópia para a área de transferência | Fórum | Adicione um botão para copiar o texto no clipbord |
| Ícones e bandeiras SVG para Blazor | Fórum | Biblioteca com muitos ícones SVG e bandeiras SVG para usar em suas páginas de barbear |
| Diálogo modal para Blazor | Fórum | Diálogo modal simples para a Blazor WebAssembly |
| PSC.EXTENTionsions | Fórum | Muitas funções para .NET5 em um pacote NUGET que você pode baixar gratuitamente. Coletamos neste pacote funções para o trabalho diário para ajudá -lo com reivindicações, cordas, enumistas, data e hora, expressões ... |
| Quill for Blazor | Fórum | O componente Quill é um controle reutilizável personalizado que nos permite consumir facilmente a pena e colocar várias instâncias em uma única página em nosso aplicativo Blazor |
| Segmento para Blazor | Fórum | Este é um componente de segmento para o Blazor Web Assembly e Blazor Server |
| Guias para Blazor | Fórum | Este é um componente de guias para o Blazor Web Assembly e Blazor Server |
| WorldMap para Blazor | Fórum | Mostre mapas mundiais com seus dados |
