如何使用 ASP.NET MVC 3 和 Stack Overflow 的 Markdown

Posted 2023-02-24

【中文标题】如何使用 ASP.NET MVC 3 和 Stack Overflow 的 Markdown

【英文标题】：How to use ASP.NET MVC 3 and Stack Overflow's Markdown

【发布时间】：2011-07-16 07:25:10

【问题描述】：

我找不到任何真正的来源。我正在 ASP.NET MVC 3 中构建一个站点，并希望利用 Stack Overflow 使用的 Markdown 编辑器。谁有好的教程？

你在哪里下载最新的markdown？它是用什么语言写的？我将从哪里开始将其集成到 MVC 3 项目中？即使在我完成了所有的搜索和阅读之后，我仍然很困惑。

我遇到了this site。但这似乎太老了，而且我似乎必须学习一些我完全没有经验的 CGI 和 Perl。 javascript/jQuery 版本会很棒。

更新

我注意到这个问题获得了相当多的意见，所以我决定用一些有用的参考来更新它。我设法让 Markdown 编辑器在我的网站上运行良好，并写了一些关于它的博客。

MarkdownSharp and Encoded html JQuery WMD Plugin Finding and implementing the WMD editor

【问题讨论】：

*** 使用 PageDown 客户端 Markdown 库。代码在这里：code.google.com/p/pagedown/source/browse

【参考方案1】：

*** 向全世界开源了他们的 Markdown 版本。它被称为MarkdownSharp，是用 C# 编写的。

有人在这里写了一个 HtmlHelper： http://blog.dantup.com/2011/03/an-asp-net-mvc-htmlhelper-extension-method-for-markdown-using-markdownsharp

如果您正在寻找如何实现 javascript 编辑器，则存在一个问题： Integrate Markitup text editor to ASP.NET MVC project

【参考方案2】：

您可能正在寻找MarkdownSharp

Markdown 处理器的开源 C# 实现，如 Stack Overflow 上的特色。

要将其集成到 MVC 应用程序中：

在 until 或 common 控制器中，添加以下操作方法

public ActionResult FormatMarkdown(string markdownText)

    var md = new MarkdownSharp.Markdown();
    string html = md.Transform(markdownText);
    return Json(html, JsonRequestBehavior.AllowGet);

在您的客户端视图中：

@Html.TextArea("mdText", new  rows = 12, cols = 60 )
<div id="mdFormatted"></div>

和客户端JS：

$(function () 
    var mdText = $("#mdText");
    var mdFormatted = $("#mdFormatted");
    function setFormatted(data) 
        mdFormatted.html(data);
    ;
    mdText.toObservable("keypress")
    .Throttle(200)
    .Subscribe(function () 
        $.getJSON("@VirtualPathUtility.ToAbsolute("~/Util/FormatMarkdown/")",  
             markdownText: mdText.val() 
            , setFormatted);
   )

下载RxJs（来自MSDN）并包含以下两个js文件

<script src="@Url.Content("~/Scripts/rx.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/rx.jquery.js")" type="text/javascript"></script>  

【讨论】：

虽然另一个答案是真正让我走上正轨的原因，但我也非常感谢这一点。谢谢:) +1

非常感谢 sn-ps :D

【参考方案3】：

我知道这个问题很老，但我偶然发现了另一个解决方案markdowndeep，它对 MVC 非常友好

可以通过nuget安装PM> Install-Package MarkdownDeep.Full

Markdown in C#

// Create an instance of Markdown
var md = new MarkdownDeep.Markdown();
// Set options
md.ExtraMode = true;
md.SafeMode = false;
string output = md.Transform(input);

Editor

1.将提供的 js、css、png 和 htm 文件复制到您的服务器。根据您在服务器上放置这些文件的位置，您可能需要更新 css 文件中的图像 url。

2.更新您的页面以引用 jQuery、MarkdownDeep 库和 MarkdownDeep css 文件（同样，您可能需要更改路径）。

<link rel="stylesheet" href="mdd_styles.css" 
<script type="text/javascript" src="jQuery-1.4.2.min.js">
<script type="text/javascript" src="MarkdownDeepLib.min.js">

注意：MarkdownDeepLib.min.js 是 MarkdownDeep.js、MarkdownDeepEditor.js 和 MarkdownDeepEditorUI.js 的打包缩小版。调试时，可以参考这三个文件。

3.将 Markdown 编辑器插入到您的页面中，如下所示：

<div class="mdd_toolbar"></div>
<textarea cols=50 rows=10 class="mdd_editor"></textarea>
<div class="mdd_resizer"></div>
<div class="mdd_preview"></div>

注意：相关的 div 都是可选的，如果缺少，插件将创建它们。但是...如果您这样做，您可能会在加载过程中遇到页面跳动。即：建议明确包含它们。

4.调用MarkdownDeep jQuery插件将textarea转换为MarkdownEditor

$("textarea.mdd_editor").MarkdownDeep( 
    help_location: "/Content/mdd_help.html",
    disableTabHandling:true
 );

虽然我真的很喜欢他们的产品 我不隶属于 markdowndeep 的制造商。我只是认为他们做了一个很好的产品

【讨论】：

谢谢。这确实有效。但不幸的是，编辑器并不是真正可定制的。例如，您不能停用预览窗格。如果您删除它，它是动态创建的。所以我会通过...

【参考方案4】：

这个问题很老了，但我只是在这里留下一个答案，以便未来的读者可以从中受益。

我使用了 MarkdownSharp v1.13，它确实不清理您的 html 输出。例如，如果您键入：

<script type="text/javascript">alert("Hacked");</script>

在您的输入字段中，MarkdownSharp 的输出包含相同的脚本。因此，它会将您的网站暴露给 XSS 漏洞。

从 PageDown 上的***'s article 阅读此内容：

值得注意的是，就用户输入的输入而言，Markdown 并不安全。几乎任何东西在 Markdown 中都是有效的，尤其是像 <script>doEvil();</script> 这样的东西。这个 PageDown 存储库包括 Stack Exchange 用来清理用户输入的两个插件；请参阅下面对 Markdown.Sanitizer.js 的描述。

因此，从其他角度来看，也许 Markdown 一开始就不应该清理您的输入，而 MarkdownSharp 的实现只是符合这些原则。我应该提到 *** 确实在他们的服务器端使用 MarkdownSharp。

【讨论】：

我不相信他们不再使用 MarkdownSharp，但我可能是错的。