A blazor markdown editor wraps of cherry-markdown from Tencent.
- Edit and preview mode.
- Pre-defined toolbar.
- Streaming file uploading(inspired by the built-in
InputFilecomponent). - Add auto numbers for TOC.
- Other functionalities that
cherry-markdownprovided.
dotnet add package Blazor.Cherrydown
@using Blazor.Cherrydowndo not need to add the reference to the
javascriptandCSS,Blazor.Cherrydownwill do it for you. for more into, you can refer to blazor initializer
<button @onclick="ChangeMarkdown">Change Markdown</button>
<Cherrydown @bind-Markdown="_markdown" OnFileUpload="@SaveFile" />
@code {
private string? _markdown = "# CherrydownEditor";
protected override void OnParametersSet()
{
using var reader = new System.IO.StreamReader(@"basic.md");
_markdown = reader.ReadToEnd();
base.OnParametersSet();
}
void ChangeMarkdown()
{
_markdown = "# Changed Markdown";
}
private async Task<FileUploadResult> SaveFile(FileUpload.IBrowserFile file)
{
var workDir = _config.GetValue<string>("WorkDir");
var workDirVirtualPath = _config.GetValue<string>("WorkDirVirtualPath");
await using FileStream fs = new(Path.Combine(workDir, file.Name), FileMode.Create);
await file.OpenReadStream(15 * 1024 * 1024).CopyToAsync(fs);
return new FileUploadResult { FileUri = $"{workDirVirtualPath}/{file.Name}" };
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent