Verwendung von ASP.NET MVC 3 und Stackoverflow's Markdown


70

Ich recherchiere jetzt seit ein paar Stunden und konnte keine wirklichen Quellen dafür finden. Ich erstelle eine Site in ASP.NET MVC 3 und möchte den von StackOverflow verwendeten Markdown-Editor nutzen. Hat jemand ein gutes Tutorial?

Wo lädst du den neuesten Abschlag herunter? In welcher Sprache ist es geschrieben? Wo würde ich anfangen, dies in ein MVC 3-Projekt zu integrieren? Selbst nach all dem Suchen und Lesen, das ich getan habe, bin ich immer noch ziemlich verwirrt.

Ich bin auf eine Seite gestoßen. http://daringfireball.net/projects/markdown/ Aber das scheint merkwürdig alt zu sein und es scheint, als müsste ich etwas über CGI und PERL lernen, mit dem ich absolut keine Erfahrung habe. Eine Javascript / jQuery-Version wäre großartig. Alle Ideen, Links, Referenzen werden sehr geschätzt.

AKTUALISIEREN

Ich habe festgestellt, dass diese Frage eine ganze Reihe von Ansichten erhält, und habe mich daher entschlossen, sie mit einigen hilfreichen Referenzen zu aktualisieren. Ich habe es geschafft, dass ein Markdown-Editor auf CodeTunnel.com gut funktioniert, und ich habe ein paar Blogs darüber geschrieben. Hoffentlich helfen sie jedem, der auf diese Frage stößt.


StackOverflow verwendet die clientseitige Markdown-Bibliothek von PageDown. Code hier: code.google.com/p/pagedown/source/browse
Aaron Hoffman

Antworten:



43

Sie suchen wahrscheinlich nach MarkdownSharp

Open Source C # -Implementierung des Markdown-Prozessors, wie in Stack Overflow beschrieben.

So integrieren Sie es in eine MVC-App:

  1. Fügen Sie in einem Bis- oder allgemeinen Controller die folgende Aktionsmethode hinzu

    public ActionResult FormatMarkdown(string markdownText)
    {
        var md = new MarkdownSharp.Markdown();
        string html = md.Transform(markdownText);
        return Json(html, JsonRequestBehavior.AllowGet);
    }
    
  2. in Ihrer Client-Seitenansicht:

    @Html.TextArea("mdText", new { rows = 12, cols = 60 })
    <div id="mdFormatted"></div>
    
  3. und clientseitige 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. Laden Sie RxJs (von MSDN ) herunter und fügen Sie die folgenden zwei js-Dateien hinzu

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

Die andere Antwort hat mich wirklich auf den richtigen Weg gebracht, aber ich weiß das definitiv auch zu schätzen. Vielen Dank :) +1
Chev

Vielen Dank für die Schnipsel: D
Eestein

8

Ich weiß , diese Frage ist alt, aber ich stolperte über eine andere Lösung markdowndeep , die mit MVC ist sehr freundlich

Es kann über nuget PM> Install-Package MarkdownDeep.Full installiert werden

Abschlag 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.Kopieren Sie die mitgelieferten Dateien js, css, png und htm auf Ihren Server. Je nachdem, wo Sie diese Dateien auf Ihrem Server ablegen, müssen Sie möglicherweise die Bild-URLs in der CSS-Datei aktualisieren.

2. Aktualisieren Sie Ihre Seite, um auf jQuery, die MarkdownDeep-Bibliothek und die MarkdownDeep-CSS-Datei zu verweisen (möglicherweise müssen Sie die Pfade erneut ändern).

<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 ist eine verpackte, minimierte Version von MarkdownDeep.js, MarkdownDeepEditor.js und MarkdownDeepEditorUI.js. Zum Debuggen können Sie stattdessen auf diese drei Dateien verweisen.

3. Fügen Sie den Markdown-Editor wie folgt in Ihre Seite ein:

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

Hinweis: Die zugehörigen Divs sind alle optional. Wenn sie fehlen, werden sie vom Plugin erstellt. Wenn Sie dies tun, kann es jedoch vorkommen, dass die Seite beim Laden herumspringt. dh: es wird empfohlen, sie explizit einzuschließen.

4. Rief das MarkdownDeep jQuery-Plugin auf, um den Textbereich in einen MarkdownEditor zu konvertieren

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

Obwohl ich ihr Produkt wirklich mag, bin ich nicht mit den Herstellern von Markdowndeep verbunden . Ich dachte nur, dass sie ein gutes Produkt machen


1
Vielen Dank. Das funktioniert wirklich. Leider ist der Editor nicht wirklich anpassbar. Beispielsweise können Sie den Vorschaufenster nicht deaktivieren. Wenn Sie es entfernen, wird es dynamisch erstellt. Also werde ich bestehen ...
Krisztián Balla

3

Diese Frage ist alt, aber ich hinterlasse hier nur eine Antwort, damit zukünftige Leser davon profitieren können.

Ich habe MarkdownSharp v1.13 verwendet. Es bereinigt NICHT Ihre HTML-Ausgabe. Wenn Sie beispielsweise Folgendes eingeben:

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

In Ihrem Eingabefeld enthält die Ausgabe von MarkdownSharp dasselbe Skript. Dadurch wird Ihre Website einer XSS-Sicherheitslücke ausgesetzt.

Lesen Sie dies aus dem Artikel von Stackoverflow auf PageDown:

Es ist zu beachten, dass Markdown in Bezug auf vom Benutzer eingegebene Eingaben nicht sicher ist. In Markdown ist so ziemlich alles gültig, insbesondere so etwas <script>doEvil();</script>. Dieses PageDown-Repository enthält die beiden Plugins, mit denen Stack Exchange die Benutzereingaben bereinigt. Siehe die Beschreibung von Markdown.Sanitizer.js unten.

Unter anderen Gesichtspunkten sollte Markdown Ihre Eingaben möglicherweise gar nicht erst bereinigen, und die Implementierung von MarkdownSharp entsprach nur diesen Grundsätzen. Ich sollte erwähnen, dass Stackoverflow MarkdownSharp auf der Serverseite verwendet.


Ich glaube nicht, dass sie MarkdownSharp mehr verwenden, aber ich könnte mich irren.
Chev
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.