2011-03-16 78 views
70

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

你在哪里下载最新的减价?它是用什么语言写的?我将从哪里开始将其整合到MVC 3项目中?即使在我做完所有的搜索和阅读之后,我仍然很困惑。

我遇到了一个网站。 http://daringfireball.net/projects/markdown/但是这看起来古怪而古怪,看起来我必须学习一些关于CGI和PERL的知识,而这些我完全没有经验。一个JavaScript/jQuery版本将会非常出色。任何想法,链接,参考非常感谢。

UPDATE

我注意到这个问题,越来越的意见相当数量的,所以我决定用一些有益的参考,以更新它。我设法让一个Markdown编辑器在CodeTunnel.com上很好地工作,我写了一些关于它的博客。希望他们帮助任何遇到这个问题的人。

+0

StackOverflow使用PageDown客户端的Markdown库。代码在这里:https://code.google.com/p/pagedown/source/browse/ – 2014-07-01 01:54:06

回答

41

您可能正在寻找MarkdownSharp

开源C#实现Markdown处理器,与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. 下载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> 
    
+0

虽然其他答案是真正让我走上正轨,但我也非常感谢。谢谢:) +1 – Chev 2011-03-16 04:54:03

+2

+1在您的视图中使用剃须刀; P​​ – 2011-03-16 07:21:54

+0

非常感谢您的摘录:D – eestein 2013-03-09 15:40:16

8

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

它可以通过nuget安装PM>安装包装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"> 

NB:MarkdownDeepLib.min.js是MarkdownDeep.js,MarkdownDeepEditor.js和MarkdownDeepEditorUI.js的包装,精缩版。对于调试,您可以改为引用这三个文件。

3.插入降价编辑器到您的网页是这样的:

<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.Called的MarkdownDeep jQuery插件的文本区域转换为MarkdownEditor

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

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

+1

谢谢。这真的很有用。但不幸的是,编辑并不是真正可定制的。例如,您不能停用预览窗格。如果您删除它,它会动态创建。所以我会通过... – 2014-06-03 11:57:59

2

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

我已经使用MarkdownSharp v1.13,它确实有而不是清理你的html输出。例如,如果输入:

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

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

Stackoverflow's article上PageDown键阅读:

应当指出的是,降价是不是只要用户输入的输入变为安全。在Markdown中几乎所有的东西都是有效的,特别是像<script>doEvil();</script>。这个PageDown存储库包含了Stack Exchange用来清理用户输入的两个插件;请参阅下面的Markdown.Sanitizer.js的描述。

因此,从其他角度来看,也许Markdown不应该首先对您的输入进行消毒,而MarkdownSharp的实现只是符合这些原则。我应该提到Stackoverflow确实在其服务器端使用了MarkdownSharp。

+0

我不相信他们再使用MarkdownSharp,但我可能是错的。 – Chev 2015-04-07 17:21:39