在ASP.NET Core Mvc 集成MarkDown

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

在ASP.NET Core Mvc 集成MarkDown_第1张图片一.前提

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

二.初始化

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


"~/Lib/MarkDown/css/editormd.css" rel="stylesheet" />
"~/Lib/MarkDown/css/editormd.preview.css" rel="stylesheet" />

"~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

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

    
"test-editormd">

  调用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中,我们仔细发现就可以进行改造。

在ASP.NET Core Mvc 集成MarkDown_第2张图片

  好的,这一切都非常简单了,你自己发挥,我们只要保存成功,就很简单了,你可以操作这个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 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(@"]*?\bsrc[\s\t\r\n]*=[\s\t\r\n]*[""']?[\s\t\r\n]*(?[^\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_第3张图片

 

你可能感兴趣的:(在ASP.NET Core Mvc 集成MarkDown)