基於 Blazui 的 Markdown 編輯器 Blazui.Markdown 嘗鮮

---

想做一個文檔平台用來存放和展示 Blazui 的文檔，然后基於 Markdown 寫文檔，但缺一個好用的 Blazor Markdown 編輯器，所以就順便寫一個了，功能上基本抄的 https://pandao.github.io/editor.md/en.html,現已基本開發完成，不支持流程圖，后面有需要再支持

開源地址

https://github.com/wzxinchen/Blazui.Markdown

安裝 Blazui.Markdown

• 安裝 Blazui.Markdown Nuget 包
• 根據 https://www.cnblogs.com/wzxinchen/p/12096092.html 安裝 Blazui，注意不需要安裝 Blazui.Component Nuget包
• 在 _Host.cshtml 文件中引入以下 CSS 文件，基本都是 codemirror 和 editormd 需要使用的

<link href="~/_content/Blazui.Markdown/css/editormd.min.css" rel="stylesheet" />
<!--對 editormd 的默認樣式進行更改的文件 -->
<link href="~/_content/Blazui.Markdown/css/editor.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/codemirror/5.48.4/addon/fold/foldgutter.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.min.css" rel="stylesheet">

再引入以下 JS 文件，基本都是 codemirror 需要使用的

<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.min.js"></script>
<script src="~/_content/Blazui.Markdown/js/addons.min.js"></script>
<script src="~/_content/Blazui.Markdown/js/continuelist.js"></script>
<script src="~/_content/Blazui.Markdown/js/modes.min.js"></script>
<script src="/_content/Blazui.Markdown/js/dom.js"></script>

• Startup.cs 文件中 ConfigureServices 方法增加以下代碼

services.AddMarkdown();

• 隨便找個頁面輸入以下測試代碼

<BMarkdownEditor @bind-Value="value" UploadUrl="/api/test/upload"></BMarkdownEditor>
@code{
    protected string value="# 測試";
}

運行查看效果

您的運行效果會與我的效果不一致，這是正常的,因為這篇文檔我並沒有實際運行，如果遇到問題請進群 74522853 交流