zoukankan      html  css  js  c++  java
  • 基于 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 交流

    image.png-93kB

    image.png-36.7kB

    image.png-78kB

  • 相关阅读:
    re模块---正则表达式
    configparser 配置文件模块
    svn服务器配置
    python中的list的方法
    python正则表达式
    os模块
    高阶函数
    递归
    推导式
    [转]Java中的多线程你只要看这一篇就够了
  • 原文地址:https://www.cnblogs.com/wzxinchen/p/12157734.html
Copyright © 2011-2022 走看看