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

Question

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

你在哪里下载最新的降价？用什么语言写的？我将从哪里开始将其集成到MVC 3项目中？即使经过我所做的所有搜索和阅读,我仍然很困惑.

我遇到过一个网站.http://daringfireball.net/projects/markdown/但这看起来非常古老,似乎我必须学习一些关于CGI和PERL的东西,我绝对没有经验.一个javascript/jQuery版本将是出色的.任何想法,链接,参考都非常感谢.

UPDATE

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

• MarkdownSharp和编码HTML
• JQuery WMD插件
• 查找并实施WMD编辑器

Answer 1

Stackoverflow向全世界开放了他们的Markdown版本.它叫做MarkdownSharp,用C#编写.

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

如果您正在寻找如何实现javascript编辑器,那么就存在一个问题: 将Markitup文本编辑器集成到ASP.NET MVC项目中

Answer 2

您可能正在寻找MarkdownSharp

Mark Overflow的开源C#实现,如Stack Overflow上所述.

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

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

   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>  
   

Answer 3

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

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

C#中的降价

// 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插件将textarea转换为MarkdownEditor

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

虽然我非常喜欢他们的产品,但我并不隶属于markdowndeep的制造商.我只是觉得他们做了一个好产品