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などのさまざまな形式でドキュメントをエクスポートできます。その人気が高まるにつれて、私たちのウェブサイトは自然に遅れることはできませんので、私はあなたに設定する方法を教えます!

結果は以下の通り。

最终效果图

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にエディタを追加する(テキストエリアタグ内にデータをロードするだけでエディタにロードできます)

<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 开发者提升竞争力和开发速度,建议尽早收藏该模板集合项目

Keep Exploring

延伸阅读

更多文章