ASP.NET (Core) Using Markdown

** It may take you days to study how to use Markdown, but if you read my article or download the source code, you usually get it done in 10 minutes. Let me introduce it to you first: **

Markdown is a lightweight markup language that allows people to write documents in a plain text format that is easy to read and write. The Markdown language was created in 2004 by John Gruber. The documents written by Markdown can be exported to documents in various formats such as HTML, Word, image, PDF, and Epub. As it becomes more and more popular, our website naturally cannot lag behind, so let me teach you how to configure and use it!

The achieved effect is as shown in the figure:

1.首先你要引用 markdown 相关文件库（开源项目地址）

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

2. Add an editor to html (loading data only needs to be placed in the textarea tag to load it into the editor)

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

3. Set initialization (I will not teach you to upload pictures at this time. If you want to know, please see my blog introduction later)

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

4. Get data and save

function btnSave() {
  alert("html数据：" + testEditor.getHTML());
  alert("markdown数据：" + testEditor.getMarkdown());
  //保存大家根据需要保存文本就好。
}

Related recommendations:

1. 在 ASP.NET Core 中配置使用 MarkDown 富文本编辑器实现图片上传和截图上传（开源代码.net core3.0）

2. MarkDown 富文本编辑器怎么加载模板文件:链接

开源地址 动动小手，点个推荐吧！

注意：我们机遇屋该项目将长期为大家提供 asp.net core 各种好用 demo，旨在帮助.net 开发者提升竞争力和开发速度，建议尽早收藏该模板集合项目。