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


70

我已经研究了几个小时,却找不到任何真正的来源。我正在ASP.NET MVC 3中构建站点,并希望利用StackOverflow使用的Markdown编辑器。有人有很好的教程吗?

您在哪里下载最新的降价商品?它用什么语言写?我将从哪里开始将其集成到MVC 3项目中?即使在完成所有搜索和阅读之后,我还是很困惑。

我遇到了一个站点。http://daringfireball.net/projects/markdown/但这似乎有些古怪,而且我似乎必须学习一些我完全没有经验的CGI和PERL。javascript / jQuery版本会很出色。非常感谢任何想法,链接,参考。

更新

我注意到这个问题引起了广泛的关注,因此我决定使用一些有用的参考进行更新。我设法在CodeTunnel.com上让Markdown编辑器正常工作,并为此写了一些博客。希望他们能帮助遇到此问题的任何人。


StackOverflow使用PageDown客户端Markdown库。此处的代码:code.google.com/p/pagedown/source/browse
亚伦·霍夫曼

Answers:



43

您可能正在寻找MarkdownSharp

Mark Down处理器的开源C#实现,如Stack Overflow中所述。

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

  1. 在直到或通用控制器中,添加以下操作方法

    public ActionResult FormatMarkdown(string markdownText)
    {
        var md = new MarkdownSharp.Markdown();
        string html = md.Transform(markdownText);
        return Json(html, JsonRequestBehavior.AllowGet);
    }
    
  2. 在您的客户端视图中:

    @Html.TextArea("mdText", new { rows = 12, cols = 60 })
    <div id="mdFormatted"></div>
    
  3. 和客户端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);
       })
    
  4. MSDN下载RxJ,并包括以下两个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
Chev

非常感谢您的摘要:D
eestein

8

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

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

C#中的Markdown

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

编辑

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插件将文本区域转换为MarkdownEditor

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

尽管我真的很喜欢他们的产品,但我与markdowndeep的制造商无关。我以为他们做的很好


1
谢谢。这确实有效。但是不幸的是,编辑器并不是真正可定制的。例如,您无法禁用预览窗格。如果删除它,它是动态创建的。所以,我会通过...
了Krisztián巴拉

3

这个问题很旧,但是我在这里留下一个答案,以便将来的读者可以从中受益。

我已经使用MarkdownSharp V1.13,它不会清理你的HTML输出。例如,如果您键入:

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

在您的输入字段中,MarkdownSharp的输出包含相同的脚本。因此,它使您的网站暴露于XSS漏洞。

从PageDown上Stackoverflow的文章中阅读以下内容

应当注意,就用户输入的输入而言,Markdown是不安全的。在Markdown中几乎所有有效的东西,尤其是类似的东西<script>doEvil();</script>。这个PageDown信息库包括Stack Exchange用于清理用户输入的两个插件。请参阅下面的Markdown.Sanitizer.js的说明。

因此,从其他角度来看,也许Markdown最初不应该清理您的输入,而MarkdownSharp的实现恰恰符合这些原则。我应该提到Stackoverflow确实在其服务器端使用MarkdownSharp。


我认为他们不再使用MarkdownSharp,但我可能是错的。
Chev
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.