Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

CherryMarkdown

Rich text box component based on CherryMarkdown

If you edit too much content, signalR communication interruption may be triggered. Please adjust the HubOptions configuration.

builder.Services.Configure<HubOptions>(option => option.MaximumReceiveMessageSize = null);

Basic usage

Use two-way binding to get the corresponding html and markdown content

Demo

<CherryMarkdown @bind-Value="MarkdownString" @bind-Html="HtmlString" style="height: 400px" />
<div class="mt-3">
    <textarea class="form-control" rows="6" disabled="disabled">@MarkdownString</textarea>
</div>
<div class="mt-3">
    <textarea class="form-control" rows="6" disabled="disabled"> @HtmlString</textarea>
</div>

@code {
    private string? HtmlString { get; set; }

    private string? MarkdownString { get; set; } = "# test";
}

Handle file upload events yourself

Use the OnFileUpload event to handle the file upload event, support directly pasting pictures to the browser

Demo

<CherryMarkdown OnFileUpload="OnFileUpload" />

@code {
    [Inject]
    [NotNull]
    private IOptionsMonitor<WebsiteOptions>? SiteOptions { get; set; }

    private async Task<string> OnFileUpload(CherryMarkdownUploadFile arg)
    {
        var url = Path.Combine("images", "uploader",
            $"{Path.GetFileNameWithoutExtension(arg.FileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(arg.FileName)}");
        var fileName = Path.Combine(SiteOptions.CurrentValue.WebRootPath, url);
        var ret = await arg.SaveToFile(fileName);
        return ret ? url : "";
    }
}

custom content

Customize the toolbar via ToolbarSettings, and customize the editor style via EditorSettings

Demo

<CherryMarkdown ToolbarSettings="@ToolbarSettings" EditorSettings="@EditorSettings" />

@code {
    private EditorSettings EditorSettings { get; set; } = new EditorSettings()
    {
        DefaultModel = "editOnly"
    };

    private ToolbarSettings ToolbarSettings { get; set; } = new ToolbarSettings()
    {
        Toolbar = new List<object>
        {
            "italic", new{insert = new List<string>(){"image" } }
        },
        Bubble = new List<string>()
        {
            "bold"
        },
        Float = new List<string>()
        {
            "h1"
        }
    };
}

browse mode

Pure browsing mode, no editor

Demo

<CherryMarkdown @bind-Value="MarkdownString" @bind-Html="HtmlString" style="height: 400px" IsViewer="true" />

@code {
    private string? HtmlString { get; set; }

    private string? MarkdownString { get; set; } = "# test";
}

External control components

Control content externally using CherryMarkdown's Api

Demo

@inject IStringLocalizer<CherryMarkdownApi> Localizer

<CherryMarkdown @ref="@MarkdownElement" />
<Button OnClick="@InsertCheckList">@Localizer["InsertCheckListButtonText"]</Button>
<Button OnClick="@InsertPicture">@Localizer["InsertPictureButtonText"]</Button>

@code {
    [NotNull]
    private CherryMarkdown? MarkdownElement { get; set; }

    private async Task InsertCheckList()
    {
        await MarkdownElement.DoMethodAsync("toolbar.toolbarHandlers.insert", "checklist");
    }

    private async Task InsertPicture()
    {
        await MarkdownElement.DoMethodAsync("insert", "![一张图片](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)", false, false, true);
    }
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

CherryMarkdown

Rich text box component based on CherryMarkdown

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01