这几天在做文章编辑,首先就想到了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="stylesheet" />
<link href="~/Lib/MarkDown/css/editormd.preview.css" rel="stylesheet" />
<script src="~/Lib/MarkDown/js/editormd.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" 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: ,
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[].FileName;
string fileExtention = System.IO.Path.GetExtension(files[].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[].CopyToAsync(fstream);
}
return Ok(new { code = , 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 = ;
string[] sUrlList = new string[matches.Count];
// 取得匹配项列表
foreach (Match match in matches)
sUrlList[i++] = match.Groups["imgUrl"].Value;
return sUrlList;
}

在ASP.NET Core Mvc 集成MarkDown的更多相关文章

  1. asp.net core mvc 集成miniprofiler

    原文:asp.net core mvc 集成miniprofiler asp.net core mvc 集成miniprofiler 一.环境介绍 二.监控asp.net 页面 三.监控执行的sql语 ...

  2. 跨平台应用集成(在ASP.NET Core MVC 应用程序中集成 Microsoft Graph)

    作者:陈希章 发表于 2017年6月25日 谈一谈.NET 的跨平台 终于要写到这一篇了.跨平台的支持可以说是 Office 365 平台在设计伊始就考虑的目标.我在前面的文章已经提到过了,Micro ...

  3. ASP.NET Core MVC 入门到精通 - 1. 开发必备工具 (2021)

    环境: .NET 5 ASP.NET Core MVC 1. .NET 5 作为一个资深.NET工程师,说句实话,.NET没落了,在国内更加的没落.之前做过8年node.js/前端,现如今又转回了.N ...

  4. ASP.NET Core MVC 模型绑定用法及原理

    前言 查询了一下关于 MVC 中的模型绑定,大部分都是关于如何使用的,以及模型绑定过程中的一些用法和概念,很少有关于模型绑定的内部机制实现的文章,本文就来讲解一下在 ASP.NET Core MVC ...

  5. 基于 Asp.Net Core MVC 的 Angular4 SSR 英雄指南

    为啥有这篇文章 在之前,类似 Angular.React.Vue 之类的前端框架的一个痛点就是无法在服务端提前把网页内容写入到网页中再发回浏览器,这给网站的 SEO 增加了不少困难,因为爬虫爬到的页面 ...

  6. 在 ASP.NET Core 中集成 Skywalking APM

    前言 大家好,今天给大家介绍一下如何在 ASP.NET Core 项目中集成 Skywalking,Skywalking 是 Apache 基金会下面的一个开源 APM 项目,有些同学可能会 APM ...

  7. ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用

    一.前言 1.本文主要内容 使用dotnet cli创建基于解决方案(sln+csproj)的项目 使用Visual Studio Code开发基于解决方案(sln+csproj)的项目 Visual ...

  8. 如何简单的在 ASP.NET Core 中集成 JWT 认证?

    前情提要:ASP.NET Core 使用 JWT 搭建分布式无状态身份验证系统 文章超长预警(1万字以上),不想看全部实现过程的同学可以直接跳转到末尾查看成果或者一键安装相关的 nuget 包 自上一 ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 02. Web Host 的默认配置

    视频地址: https://www.bilibili.com/video/av38392956/?p=2 语雀 https://www.yuque.com/yuejiangliu/dotnet/ixt ...

随机推荐

  1. JSP和EL和JSTL

    什么是JSP Java Server Page的缩写从用户角度看待,就是一个网页从程序员角度看待,其实是一个java类,它继承了Servlet,所以可以直接说jsp就是一个Servlet 为什么会有J ...

  2. 创想变现:斯坦福设计创新课堂ME310分享(下篇)

    编者按:今年6月,微软亚洲研究院人机交互组研究员顾嘉唯,在美国斯坦福大学担任了D-School的ME310设计课程的项目评审.该课程是斯坦福大学的全球联合新产品设计创新课程,学习方式以小组为单位,每个 ...

  3. 70-persistent-net.rules无法自动生成,解决方法

    无法自动生成70-persistent-net.rules文件的原因: 在更换linux内核前修改ifcfg-eth0文件,更换内核,使用dhclient无法动态分配IP,删掉70-persisten ...

  4. 3.redis kyes命令

    Keys命令 1.1设置key的生存时间 Redis在实际使用过程中更多的用作缓存,然而缓存的数据一般都是需要设置生存时间的,即:到期后数据销毁. EXPIRE key seconds         ...

  5. php的header方法

    http://www.cnblogs.com/fengzheng126/archive/2012/04/21/2461475.html

  6. 二、RabbitMQ简介及AMQP协议

    RabbitMQ简介 RabbitMQ是开源的消息代理和队列服务器,是由Erlang语言开发的,基于AMQP协议(Advanced Message Queuing Protocol高级消息队列协议)的 ...

  7. IOC初始化销毁的2种实现方式

    IOC初始化销毁的2种实现方式 1.bean内调用init-method 和destroy-method 2.通过注解实现@PostConstruct 和@PreDestroy ----------- ...

  8. 分布式事物-2pc和3pc区别

    参考地址: https://www.cnblogs.com/bangerlee/p/5268485.html, 感谢原作者 http://blog.51cto.com/11821908/2058651 ...

  9. Ionic3学习笔记(十五)自定义 tab icon

    本文为原创文章,转载请标明出处 美工做了一套 icon,自然是要用的.将 icon copy 到 assets 文件夹下. 例如 .icon-ios-home-custom 为 iOS icon 选中 ...

  10. 吴裕雄--天生自然 R语言开发学习:高级数据管理(续三)

    #-----------------------------------# # R in Action (2nd ed): Chapter 5 # # Advanced data management ...