ASP.NET (Core) 使用 Markdown

研究如何使用 Markdown 你們可能要花好幾天才搞定，但看我的文章或下載了原始碼，你搞定一般在 10 分鐘之內。我先給各位介紹下它：

Markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文字格式編寫文件。Markdown 語言在 2004 由約翰·格魯伯（英語：John Gruber）建立。Markdown 編寫的文件可以匯出 HTML、Word、圖片、PDF、Epub 等多種格式的文件。隨著它的越來越流行我們的網站自然不能落後，那麼我來教大家怎麼設定使用吧！

實現效果如圖：

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.html 中加入編輯器（載入資料只需放在 textarea 標籤內即可載入到編輯器）

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

3.設定初始化（此時暫不教大家上傳圖片，想了解請看我後面的部落格介紹）

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

4.取得資料儲存

function btnSave() {
  alert("html資料：" + testEditor.getHTML());
  alert("markdown資料：" + testEditor.getMarkdown());
  //儲存大家根據需要儲存文字就好。
}

相關推薦：

1. 在 ASP.NET Core 中設定使用 MarkDown 富文字編輯器實現圖片上傳和截圖上傳（開放原始碼.net core3.0）

2. MarkDown 富文字編輯器怎麼載入範本檔案：連結

開源位址 動動小手，點個推薦吧！

注意：我們機會屋該專案將長期為大家提供 asp.net core 各種好用 demo，旨在幫助.net 開發者提升競爭力和開發速度，建議儘早收藏該範本集合專案。