打造高效 Markdown 编辑器：BootstrapBlazor + FreeSql 实战案例

在 Web 应用中集成 Markdown 编辑器已成为内容管理系统的标配。BootstrapBlazor 作为微软官方推荐的国内优秀 UI 组件库，其提供的 Markdown 组件不仅美观，而且功能强大。结合 FreeSql 这一轻量级 ORM，我们可以快速实现一套“编辑-存储-展示”的完整链路。

一、 核心组件介绍

• BootstrapBlazor.Markdown: 基于 Toast UI Editor 封装，支持所见即所得（WYSIWYG）和 Markdown 模式。
• FreeSql: 功能强大的 .NET ORM，支持 CodeFirst，能自动维护数据库表结构，非常适合快速迭代。

二、 安装与基础配置

首先，通过 NuGet 安装必要的组件包：

dotnet add package BootstrapBlazor.Markdown

在 Program.cs 或 Startup.cs 中注册服务（如果使用 FreeSql，请确保已配置好数据库连接）：

// 注册 BootstrapBlazor 服务
builder.Services.AddBootstrapBlazor();

三、 实战：构建动态页面编辑器

我们将实现一个功能：从数据库读取页面配置，通过 Markdown 编辑器修改，并保存生效。

1. 自动维护菜单项

在系统初始化（如 MainLayout.razor）时，利用 FreeSql 的 CodeFirst 特性自动创建页面记录：

// 检查并自动生成“页面编辑”菜单
if (!await fsql.Select<WebPages>().AnyAsync(a => a.PageName == "页面编辑"))
{
    await fsql.Insert(new WebPages {
        PageName = "页面编辑", 
        Url = "editpages", 
        Icon = "fa-solid fa-gears"
    }).ExecuteAffrowsAsync();
}

2. 构建编辑页面 EditPages.razor

编辑器支持多种模式，我们可以通过参数配置其高度和初始显示方式。

@page "/editpages"
@inject IFreeSql fsql
@inject ToastService ToastService

<Card Title="页面内容编辑器">
    <BodyTemplate>
        <Markdown @bind-Value="@TpvPage.Markdown" 
                  @bind-Html="@TpvPage.Html"
                  Height="500" 
                  PreviewStyle="PreviewStyle.Tab" 
                  InitialEditType="InitialEditType.Wysiwyg" />
        
        <div class="mt-3">
            <Button Color="Color.Primary" Icon="fa-solid fa-save" OnClick="@Save">保存更改</Button>
        </div>
    </BodyTemplate>
</Card>

@code {
    private WebPages TpvPage = new();

    protected override async Task OnInitializedAsync()
    {
        // 从数据库加载第一条页面数据
        TpvPage = await fsql.Select<WebPages>().FirstAsync() ?? new();
    }

    private async Task Save()
    {
        var res = await fsql.Update<WebPages>().SetSource(TpvPage).ExecuteAffrowsAsync();
        if (res > 0)
        {
            await ToastService.Success("保存成功", "页面内容已持久化至数据库。");
        }
    }
}

四、 核心参数详解

在使用 Markdown 组件时，以下几个参数能极大提升用户体验：

五、 内容展示：以只读模式渲染

在前端展示页面 Htmls.razor 中，我们不需要用户编辑，只需将 IsViewer 设为 true，组件就会自动解析 Markdown 并以美观的排版显示：

@* 渲染模式：只读预览 *@
<Markdown Value="@TpvPage.Markdown" IsViewer="true" />

六、 总结与进阶建议

通过 BootstrapBlazor，我们避免了编写复杂的 JavaScript 互操作代码；而 FreeSql 则简化了数据层开发。两者结合，使得在 Blazor 中构建内容管理系统（CMS）变得异常简单。