想做一个文档平台用来存放和展示 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 交流

基于 Blazui 的 Markdown 编辑器 Blazui.Markdown 尝鲜的更多相关文章

  1. Cnblog Markdown编辑器

    第一次使用Cnblog Markdown编辑器 1.在博客园使用 Markdown 与 LATEX[1] 1.1.开启MarkDown编辑器 选择 Markdown 撰写博文:在博客园管理-选项中,将 ...

  2. Markdown编辑器语言——30分钟入门到到精通

    一.简要说明 开篇说明 其实吧这是我人生中写的第一篇博客,我也不知道怎么排版和编辑让博文显示的更加美观,现在正在学Markdown编辑语法,也是刚刚学编程的一个小菜鸟,目前是大二的在校生,我的初衷是把 ...

  3. markdown你的生活 | markdown编辑器简介

    前言 你是否有这样的困扰?希望找一个笔记本记录东西,window自带的notepad(记事本)?,轻量但是功能太有限.word文档?功能虽多,但是很沉重,我们需要花很多时间去想如何排版会更记录会清晰, ...

  4. Markdown编辑器为什么好用以及好用的markdown编辑器

    Markdown编辑器为什么好用以及好用的markdown编辑器 一.总结 一句话总结:Markdown 是一种简单的.轻量级的标记语法.用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成 ...

  5. 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜

    简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...

  6. 基于Java和Bytemd用120行代码实现一个桌面版Markdown编辑器

    前提 某一天点开掘金的写作界面的时候,发现了内置Markdown编辑器有一个Github的图标,点进去就是一个开源的Markdown编辑器项目bytemd(https://github.com/byt ...

  7. NiceMark——我的Markdown编辑器

    NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...

  8. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  9. 推荐一款Mac上好用的Markdown编辑器

    [TOC] 推荐一款Mac上好用的Markdown编辑器 正文 我算是一位Evernote的重度用户吧.之前也尝试过为知笔记,有道云笔记,微软的onenote,最后还是觉的Evernote.因为我喜欢 ...

随机推荐

  1. 模板—tarjan缩点

    void tarjan(int x) { dfn[x]=++cnt;low[x]=cnt; vi[x]=; stack[++top]=x; for(rint i=f(x);i;i=n(i)) if(! ...

  2. 学习layer弹层组件移动版

    layer弹层组件官网 常用参数: shadeClose:默认true,是否点击遮罩时关闭层

  3. behavior planning——12.example cost funtion -lane change penalty

      In the image above, the blue self driving car (bottom left) is trying to get to the goal (gold sta ...

  4. JS判断在哪一端浏览器打开

    <script src="js/jquery-2.2.3.min.js"></script> <script> var browser = { ...

  5. hdu 3374 String Problem (字符串最小最大表示 + KMP求循环节)

    Problem - 3374   KMP求循环节. http://www.cnblogs.com/wuyiqi/archive/2012/01/06/2314078.html   循环节推导的证明相当 ...

  6. hdu 3466 Proud Merchants(有排序的01背包)

    Proud Merchants Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) ...

  7. Codeforces Round #179 (Div. 1 + Div. 2)

    A. Yaroslav and Permutations 值相同的个数不能超过\(\lfloor \frac{n + 1}{2} \rfloor\). B. Yaroslav and Two Stri ...

  8. H3C 传递信息(续)

  9. JVM系统属性 OS环境变量 JVM启动参数

    JVM系统属性(System Properties) 1.不支持通过文件查看和设置系统属性 2.可以通过JDK自带的工具jvisulavm.exe查看 3.可以在Java程序中使用API来查看系统属性 ...

  10. mysql常用基础语句学习

    常用sql语句 查询: SELECT 列名(或者*,表示所有列) FROM 表名 WHERE 筛选条件; FROM 表名:顾名思义,就是从表名指定的这张表格中: WHERE 筛选条件:意思是" ...