706 字
4 分钟
打造高效 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 组件时，以下几个参数能极大提升用户体验：
| 参数 | 说明 |
|---|---|
InitialEditType | 设置初始模式：Wysiwyg (所见即所得) 或 Markdown (纯代码)。 |
PreviewStyle | 预览样式：Tab (切换卡) 或 Vertical (左右分屏)。 |
IsViewer | 关键参数：设置为 true 时，组件将作为纯阅读器使用，不显示工具栏。 |
Language | 支持多语言切换（如 zh-CN）。 |
五、 内容展示：以只读模式渲染
在前端展示页面 Htmls.razor 中，我们不需要用户编辑，只需将 IsViewer 设为 true，组件就会自动解析 Markdown 并以美观的排版显示：
@* 渲染模式：只读预览 *@<Markdown Value="@TpvPage.Markdown" IsViewer="true" />六、 总结与进阶建议
通过 BootstrapBlazor，我们避免了编写复杂的 JavaScript 互操作代码；而 FreeSql 则简化了数据层开发。两者结合，使得在 Blazor 中构建内容管理系统（CMS）变得异常简单。
打造高效 Markdown 编辑器：BootstrapBlazor + FreeSql 实战案例
https://sw.rscclub.website/posts/bootstrapblazormd/