在ASP.NET Core Mvc集成MarkDown的方法

 更新时间:2020年03月05日 15:01:10   作者:张子浩  
这篇文章主要介绍了在ASP.NET Core Mvc集成MarkDown的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  这几天在做文章编辑,首先就想到了markdown,它比其它的都要新,而且很好用,相对于其它的html编辑器,好久不更新,要好得多,哦~对了我现在已经用上新版的Edge了,经过很多朋友测试,性能比谷歌浏览器都要好很多,并且资源消耗也相对来说小。

一.前提

  好吧,言归正传,你首先需要下载MarkDown的相关样式脚本资源,下载完毕之后拖放你的ASP.NET Core Mvc 项目中的wwwroot中。

二.初始化

在页面中我们理所当然需要引用css 脚本资源,随后调用它的初始化方法。

<script src="~/js/jquery-1.10.2.min.js"></script>
<link href="~/Lib/MarkDown/css/editormd.css" rel="external nofollow" rel="stylesheet" />
<link href="~/Lib/MarkDown/css/editormd.preview.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Lib/MarkDown/js/editormd.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />

我们的Html部分也很简单,它只需要一个Textarea盒子。

 <div id="test-editormd">
    <textarea id="articleContent" style="display: none;">@Html.Raw(html)</textarea>
  </div>

调用markdown的初始化方法也很简单,我们通常这么做。

$(function () {
    testEditor = editormd("test-editormd", {
      width: "99%",
      height: 640,
      syncScrolling: "single",
      path: "/Lib/MarkDown/lib/",
      saveHTMLToTextarea: true,
      emoji: true
    });
});

到了这里,我就会问?我如何获取我的html呢?这很简单只要通过testEditor.getHTML()方法就可以了,那么你一定就会知道如何获取markdown了getMarkdown(),这两个方法取决你想保存什么,如果你是保存了html,那么你就无需通过asp.net core htmlhelper 的@Html.Raw来进行转义,如果是markdown,您当然需要这么干。

三.优化

有时候我们想要上传咱们自己服务器的图片,经过发现,这个image上传的弹窗就在/lib/MarkDown/plugins/image-dialog中,我们仔细发现就可以进行改造。

好的,这一切都非常简单了,你自己发挥,我们只要保存成功,就很简单了,你可以操作这个js的任何东西,只要不破坏它的btn相关方法。随后,你可以写一个上传图片的Api来操作。

public class FileUploadController : Controller
  {
    private IWebHostEnvironment en;
    public FileUploadController(IWebHostEnvironment en) { this.en = en; }
    public IActionResult Index() { return View(); }
    [HttpPost]
    public async Task<IActionResult> UploadF()
    {
      var files = Request.Form.Files;
      string filename = files[0].FileName;
      string fileExtention = System.IO.Path.GetExtension(files[0].FileName);
      string path = Guid.NewGuid().ToString() + fileExtention;
      string basepath = en.WebRootPath;
      string path_server = "/upfile/" + path;
      using (FileStream fstream = new FileStream(basepath+path_server, FileMode.OpenOrCreate, FileAccess.ReadWrite))
      // using (FileStream fstream = System.IO.File.Create(newFile)) //两种都可以使用
      {
        await files[0].CopyToAsync(fstream);
      }
      return Ok(new { code = 200, msg = "上传成功!" ,filepath = path_server});
    }
  }

在我的项目中,我一般喜欢截取文章中的第一个图片作为的banner部分,ok这一切只需要一个helper。

public static string[] GetHtmlImageUrlList(string sHtmlText)
    {
      // 定义正则表达式用来匹配 img 标签  
      Regex regImg = new Regex(@"<img\b[^<>]*?\bsrc[\s\t\r\n]*=[\s\t\r\n]*[""']?[\s\t\r\n]*(?<imgUrl>[^\s\t\r\n""'<>]*)[^<>]*?/?[\s\t\r\n]*>", RegexOptions.IgnoreCase);
      // 搜索匹配的字符串  
      MatchCollection matches = regImg.Matches(sHtmlText);
      int i = 0;
      string[] sUrlList = new string[matches.Count];
      // 取得匹配项列表  
      foreach (Match match in matches)
        sUrlList[i++] = match.Groups["imgUrl"].Value;
      return sUrlList;
    }

到此这篇关于在ASP.NET Core Mvc集成MarkDown的方法的文章就介绍到这了,更多相关ASP.NET Core Mvc集成MarkDown内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • HttpWebRequest的常见错误使用TcpClient可避免

    HttpWebRequest的常见错误使用TcpClient可避免

    有时使用HttpWebRequest对象会出现错误有三种服务器提交了协议冲突/基础连接已经关闭:连接被意外关闭/无法发送具有此谓词类型的内容正文,感兴趣的朋友可以参考下本文
    2013-02-02
  • ASP.NET编程获取网站根目录方法小结

    ASP.NET编程获取网站根目录方法小结

    这篇文章主要介绍了ASP.NET编程获取网站根目录方法,较为详细的分析了ASP.NET针对网站目录及物理路径的操作技巧,并给出了实例予以总结,需要的朋友可以参考下
    2015-11-11
  • Win10 IIS 安装.net 4.5的方法

    Win10 IIS 安装.net 4.5的方法

    这篇文章主要介绍了Win10 IIS 安装及.net 4.5及Win10安装IIS并配置ASP.NET 4.0的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • ASP.NetCore使用Swagger实战

    ASP.NetCore使用Swagger实战

    这篇文章主要介绍了ASP.NetCore使用Swagger实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • asp.net html控件的File控件实现多文件上传实例分享

    asp.net html控件的File控件实现多文件上传实例分享

    asp.net中html控件的File控件实现多文件上传简单实例,开发工具vs2010使用c#语言,感兴趣的朋友可以了解下,必定是多文件上传值得学习,或许本文所提供的知识点对你有所帮助
    2013-02-02
  • asp.net中日历函数Calendar的使用方法

    asp.net中日历函数Calendar的使用方法

    calendar 控件用于在浏览器中显示日历,该控件可显示某个月的日历,允许用户选择日期,也可以跳到前一个或下一个月
    2011-05-05
  • .net core如何使用Redis发布订阅

    .net core如何使用Redis发布订阅

    本篇文章主要介绍了.net core如何使用Redis发布订阅,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • ASP.NET Core 数据保护(Data Protection)中篇

    ASP.NET Core 数据保护(Data Protection)中篇

    这篇文章主要为大家再一次介绍了ASP.NET Core 数据保护(Data Protection),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • .Net中的Http请求调用详解(Post与Get)

    .Net中的Http请求调用详解(Post与Get)

    在我们服务端调用第三方接口时,如:支付宝,微信支付,我们服务端需要模拟http请求,下面这篇文章主要给大家介绍了关于.Net中Http请求调用(Post与Get)的相关资料,需要的朋友可以参考下
    2022-09-09
  • ASP.NET MVC中的AJAX应用

    ASP.NET MVC中的AJAX应用

    这篇文章主要介绍了ASP.NET MVC中的AJAX应用的相关资料,需要的朋友可以参考下
    2014-10-10

最新评论