ASP.NET (Core)でMarkdownを使用する

ASP.NET (Core)でMarkdownを使用する

以前学習したログインの小さなサンプルを共有します。

最終更新 2021/11/02 21:57
殷慈航
読了目安 2 分
カテゴリ
ASP.NET Core
タグ
.NET C# ASP.NET Core Markdown

Markdownの使い方を研究するのに、皆さんは数日かかるかもしれませんが、私の記事を読んだり、ソースコードをダウンロードすれば、通常10分以内にマスターできます。まずはこれを紹介します:

Markdownは軽量マークアップ言語で、読み書きしやすいプレーンテキスト形式でドキュメントを作成できます。Markdown言語は2004年にJohn Gruberによって作成されました。Markdownで作成したドキュメントは、HTML、Word、画像、PDF、Epubなど様々な形式にエクスポートできます。その人気が高まるにつれ、私たちのWebサイトも遅れを取るわけにはいきません。では、設定と使い方を教えていきます!

実装イメージ:

最終イメージ図

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の便利なデモを提供していきます。.NET開発者の競争力と開発速度向上を支援することを目的としています。こちらのテンプレート集プロジェクトを早めにブックマークされることをお勧めします。

さらに探索

関連読書

その他の記事