酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【ECS精选特惠】新用户上云低至1折起
百度资源

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-03-05
本篇文章主要介绍了详解在ASP.NET Core Mvc集成MarkDown的方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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

一.前提

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

二.初始化

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

?
1
2
3
4
5
<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盒子。

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

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

?
1
2
3
4
5
6
7
8
9
10
$(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来操作。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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;
    }

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.cnblogs.com/ZaraNet/p/12420011.html

相关文章

  • .NET Core 3.0里新的JSON API介绍

    .NET Core 3.0里新的JSON API介绍

    为什么需要新的 JSON API ? JSON.NET 大家都用过,老版本的 ASP.NET Core 也依赖于 JSON.NET 。 然而这个依赖就会引起一些版本问题:例如 ASP .NET Core某个版本需要使用 JSON .NET v10 ,而另一个库需要使用 JSON.NET v11 ;或者 JSON ......
    03-17
  • Net Core Web Api项目与在NginX下发布的方法

    Net Core Web Api项目与在NginX下发布的方法

    前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目。 测试环境 操作系统:windows 10 开发工具:visualstudio 2019 框架:Net Core 3 Net Core WebApi项目创建 首先创建一个Net Core WebApi项目CorePublishFo......
    03-17
  • ASP.NET Core中的Http缓存使用

    ASP.NET Core中的Http缓存使用

    Http响应缓存可减少客户端或代理对web服务器发出的请求数。响应缓存还减少了web服务器生成响应所需的工作量。响应缓存由Http请求中的header控制。 而ASP.NET Core对其都有相应的实现,并不需要了解里面的工作细节,即可对其进行良好的控......
    03-08
  • 详解把.net Core项目迁移到VS2019 for MAC的方法

    详解把.net Core项目迁移到VS2019 for MAC的方法

    VS2019 for MAC已经发布很长时间了,本以为项目移过去很麻烦,一直没有动作,最近呆家里快发霉了,决定研究研究,没想到一句代码都不需要动,直接完功,这下可以生产了。同学们可以放心整了。 本次平台的需求: MAC OS : mac OS Catalin......
    03-08
  • .NET Core基于Websocket实现的在线聊天室

    .NET Core基于Websocket实现的在线聊天室

    什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后就会断开连接。 在没有websocket之前web系统如果要做......
    03-07
  • 详解在ASP.NET Core Mvc集成MarkDown的方法

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

    这几天在做文章编辑,首先就想到了markdown,它比其它的都要新,而且很好用,相对于其它的html编辑器,好久不更新,要好得多,哦~对了我现在已经用上新版的Edge了,经过很多朋友测试,性能比谷歌浏览器都要好很多,并且资源消耗也相对来......
    03-05
  • ASP.Net Core3.0中使用JWT认证

    ASP.Net Core3.0中使用JWT认证

    JWT认证简单介绍 关于Jwt的介绍网上很多,此处不在赘述,我们主要看看jwt的结构。 JWT主要由三部分组成,如下: 1 HEADER.PAYLOAD.SIGNATURE HEADER包含token的元数据,主要是加密算法,和签名的类型,如下面的信息,说明了 加密的对象类......
    02-27
  • asp.net全局变量的实例介绍

    asp.net全局变量的实例介绍

    asp.net获取全局变量方法 第一种,首先打开visual studio,新建web项目。 其次,在新建的web项目中,打开web.config文件,在此文件中添加关键字appSettings标记,如下图所示。 第三,在appSettings中添加你想要的全局变量add key=key1 val......
    02-27
  • ASP.NET Core MVC 中实现中英文切换

    ASP.NET Core MVC 中实现中英文切换

    哈喽..大家好 很久没有更新了,今天就来一篇最近开发用到的功能,那就是中英文切换,这个实际上也不是高大上,先说一下原理,在.NET Core框架中给我们提供了全球化的类,叫做Localization,其官方的文档地址传送门。 在我的项目中,我是......
    02-24
  • 详解asp.net core 授权方法

    详解asp.net core 授权方法

    IAuthorizeDate接口代表了授权系统的源头: public interface IAuthorizeData{ string Policy { get; set; } string Roles { get; set; } string AuthenticationSchemes { get; set; }} 接口中定义的三个属性分别代表了三种授权类型: 1......
    01-23

最新更新