stay ASP.NET Method of integrating markdown with core MVC

Time:2020-9-23

In the past few days when I was doing article editing, I first thought of markdown. It is newer than other HTML editors, and it is very easy to use. Compared with other HTML editors, it has not been updated for a long time. Oh ~ by the way, I have now used the new version of edge. After many friends’ tests, the performance is much better than that of Google browser, and the resource consumption is relatively small.

1、 Premise

Well, to get to the point, you need to download markdown’s related style script resources first, and then drag and drop your ASP.NET Wwwroot in the core MVC project.

2、 Initialization

In the page behoove, we need to refer to the CSS script resource, and then call its initialization method.


<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" />

Our HTML part is also very simple, it only needs a textarea box.


 <div>
    <textarea style="display: none;">@Html.Raw(html)</textarea>
  </div>

Calling the initialization method of markdown is also very simple, as we usually do.


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

When I get here, I ask? How do I get my HTML? It’s easy, just go through testEditor.getHTML () method, then you will know how to get markdown () getmarkdown (). These two methods depend on what you want to save. If you save HTML, you don’t need to pass the asp.net Core htmlhelper’[email protected] Html.Raw If it is markdown, you need to do so.

3、 Optimization

When we upload the images / image / image / plugin, we can find that when we upload them, we can find that when we want to upload them, we can find them in the server.

OK, all this is very simple. You can play by yourself. As long as we save it successfully, it will be very simple. You can operate anything in JS as long as it does not destroy its BTN related methods. Then, you can write an API to upload the image.

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)) // both can be used
      {
        await files[0].CopyToAsync(fstream);
      }
      Return OK (New {code = 200, MSG = upload succeeded! " ,filepath = path_ server});
    }
  }

In my project, I usually like to intercept the first picture in the article as the banner part of. OK, all this requires only a helper.

public static string[] GetHtmlImageUrlList(string sHtmlText)
    {
      //Define regular expressions to match img tags  
      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);
      //Search for matching strings  
      MatchCollection matches = regImg.Matches(sHtmlText);
      int i = 0;
      string[] sUrlList = new string[matches.Count];
      //Get list of matches  
      foreach (Match match in matches)
        sUrlList[i++] = match.Groups["imgUrl"].Value;
      return sUrlList;
    }

This article is about ASP.NET Core MVC integrated markdown method is introduced here, more relevant ASP.NET Core MVC integration markdown content, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]