BootstrapBlazor实战 Markdown 编辑器使用

原创

已于 2022-05-05 15:51:48 修改 · 746 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言 #面试

于 2022-05-05 15:36:51 首次发布

本文介绍了如何在BootstrapBlazor项目中实战Markdown编辑器的使用，包括Markdown编辑器简介、实战步骤（如左侧菜单加入编辑功能、实体类加入Markdown字段、编辑功能实现等）、演示页面的创建，以及使用感受和总结。文章还提到了Freesql ORM的支持，为数据库后台维护提供便利。

基础工程使用工程: B08. BootstrapBlazor实战 Menu 导航菜单使用

实战BootstrapBlazorMenu Markdown 编辑器使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面

BootstrapBlazor 是 Bootstrap 风格的 Blazor UI 组件库基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉

demo演示的是Sqlite驱动,FreeSql支持多种数据库，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess

原文链接 Bootstrap Blazor 实战 Markdown 编辑器使用 - AlexChow - 博客园

1.Markdown 编辑器简介

提供 Markdown 语法支持的文本编辑器

Bootstrap Blazor enterprise-level UI component library

Nuget 包安装

使用 nuget.org 进行 BootstrapBlazor.Markdown 组件的安装

.NET CLI

dotnet add package BootstrapBlazor.Markdown

示例

<p>输入 <code>Markdown</code> 相关代码后，点击下方相关区域显示数据</p>
<div style="width: 100%; height: 300px;">
    <Markdown @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; }
}