Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Markdown

A text editor that provides support for the Markdown syntax

Precautions

This component relies on BootstrapBlazor.Markdown, which needs to reference its component package when using this component

Nuget Install

Use nuget.org to install BootstrapBlazor.Markdown component

.NET CLI

dotnet add package BootstrapBlazor.Markdown

PackageReference

<PackageReference Include="BootstrapBlazor.Markdown" Version="7.0.0" />

Package Manager

Install-Package BootstrapBlazor.Markdown

CSS file

dynamic import css

JS file

dynamic import javascript

Localization

Tips

The component has a built-in Chinese to switch between current cultural information for Chinese

Common usage

The default setting

Demo

Once you Markdown code, click on the relevant area below to display the data

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Markdowns> Localizer

<div style="width: 100%; height: 300px;">
    <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
</div>
<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? MarkdownString { get; set; }

    private string? HtmlString { get; set; }

    private string? Language { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    /// <returns></returns>
    protected override void OnInitialized()
    {
        Language = CultureInfo.CurrentUICulture.Name;
        MarkdownString = $"### {Localizer["MarkdownString"]}";
    }
}

Load the data asynchronously

Get Markdown display with Webapi

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Markdowns> Localizer

<Button Text="@Localizer["MarkdownsAsyncButtonText"]" IsAsync="true" OnClick="GetAsyncString" Icon="fa-solid fa-font-awesome" class="mb-3" />
<Markdown Value="@AsyncValue" @ref="MarkdownSetValue"></Markdown>

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

    [NotNull]
    private Markdown? MarkdownSetValue { get; set; }

    private async Task GetAsyncString()
    {
        await Task.Delay(600);
        AsyncValue = $"### {DateTime.Now}";
        await MarkdownSetValue.SetValue(AsyncValue);
    }
}

Common properties

Change the default parameters

Demo

Set the minimum height of the Markdown Editor 300px, the default height 500px, indicating that this is the Markdown, tab display, the default display of the WYSIWYG page

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Markdowns> Localizer

<Markdown Height="500" MinHeight="300" Placeholder="@Localizer["MarkdownsCommonPropertyPlaceHolder"]" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>

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

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    /// <returns></returns>
    protected override void OnInitialized()
    {
        Language = CultureInfo.CurrentUICulture.Name;
    }
}

Browser mode

Simple browsing mode, not editable

Demo

Set the markdown editor to browse-only mode, IsViewer='true'

<Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>

Dark mode

Demo

<Markdown IsDark="true" Value="# Dark Mode"></Markdown>

Enable the code highlighting plugin

Enable plugins with EnableHighlight=true, highlighting using ``` followed by code formatting, and js highlight syntax for example ```js

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Markdowns> Localizer

<Markdown EnableHighlight="true" Value="@JsString"></Markdown>

@code {
    private string JsString { get; set; } = @"```js
console.log('test');
```";
}

External operation Markdown

Using APIs to manipulate the Editor from the outside, the specific API reference tui.editor api

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Markdowns> Localizer

<Markdown @ref="Markdown"></Markdown>
<div class="mt-3">
    <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", "# test"))">@Localizer["MarkdownsBrowserButtonText1"]</Button>
    <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", $"![{Localizer["MarkdownsBrowserText"]}](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">@Localizer["MarkdownsBrowserButtonText2"]</Button>
    <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("moveCursorToEnd"))">@Localizer["MarkdownsBrowserButtonText3"]</Button>
</div>

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

Validate

Check data validity and prompt automatically based on custom validation rules

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Markdowns> Localizer

<ValidateForm Model="@Model">
    <div class="row g-3 form-inline">
        <div class="col-12">
            <Markdown @bind-Value="Model.Name"></Markdown>
        </div>
        <div class="col-12">
            <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["MarkdownsValidateSubmitText"]" />
        </div>
    </div>
</ValidateForm>

@code {
    [NotNull]
    private Foo? Model { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    /// <returns></returns>
    protected override void OnInitialized()
    {
        Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };
    }
}

Attributes

B station related video link

交流群

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

Markdown

A text editor that provides support for the Markdown syntax

CSS file

JS file

Localization

Tips

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01