So verwenden Sie ASP.NET MVC 3 und Markdown von Stack Overflow

Lesezeit: 5 Minuten

Benutzer-Avatar
Chev

Ich konnte keine wirklichen Quellen dafür finden. Ich erstelle eine Website in ASP.NET MVC 3 und möchte den Markdown-Editor nutzen, den Stack Overflow verwendet. Hat jemand eine gute Anleitung?

Wo laden Sie den neuesten Markdown herunter? In welcher Sprache ist es geschrieben? Wo würde ich anfangen, dies in ein MVC 3-Projekt zu integrieren? Auch nach all dem Suchen und Lesen bin ich immer noch ziemlich verwirrt.

Ich bin gestoßen Diese Seite. Aber das scheint seltsam alt zu sein, und es scheint, als müsste ich ein bisschen etwas über CGI und Perl lernen, mit denen ich absolut keine Erfahrung habe. Eine JavaScript/jQuery-Version wäre großartig.

Aktualisieren

Mir ist aufgefallen, dass diese Frage ziemlich viele Aufrufe erhält, also habe ich beschlossen, sie mit einigen hilfreichen Referenzen zu aktualisieren. Ich habe es geschafft, einen Markdown-Editor auf meiner Website zum Laufen zu bringen, und ich habe ein paar Blogs darüber geschrieben.

Benutzer-Avatar
John Farell

Stackoverflow hat ihre Version von Markdown der Welt als Open Source zur Verfügung gestellt. Es heißt MarkdownSharp und ist in C# geschrieben.

Jemand hat hier einen HtmlHelper geschrieben:
http://blog.dantup.com/2011/03/an-asp-net-mvc-htmlhelper-extension-method-for-markdown-using-markdownsharp

Wenn Sie nach der Implementierung eines Javascript-Editors suchen, gibt es eine vorhandene Frage: Integrieren Sie den Markitup-Texteditor in das ASP.NET MVC-Projekt

Benutzer-Avatar
Scott Weinstein

Sie suchen wahrscheinlich MarkdownSharp

Open-Source-C#-Implementierung des Markdown-Prozessors, wie auf Stack Overflow vorgestellt.

So integrieren Sie es in eine MVC-App:

  1. Fügen Sie in einem until- 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 clientseitiges 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 herunterladen (von MSDN) und fügen Sie die folgenden zwei js-Dateien hinzu

    <script src="https://stackoverflow.com/questions/5320922/@Url.Content("~/Scripts/rx.js")" type="text/javascript"></script>    
    <script src="https://stackoverflow.com/questions/5320922/@Url.Content("~/Scripts/rx.jquery.js")" type="text/javascript"></script>  
    

  • Während die andere Antwort mich wirklich auf den richtigen Weg gebracht hat, schätze ich diese definitiv auch. Danke 🙂 +1

    – Chev

    16. März 2011 um 4:54 Uhr

  • Vielen Dank für die Schnipsel 😀

    – eestein

    9. März 2013 um 15:40 Uhr

Ich weiß, diese Frage ist alt, aber ich bin auf eine andere Lösung gestoßen markdowntief das ist sehr freundlich mit MVC

Es kann über nuget installiert werden 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.Kopieren Sie die mitgelieferten js-, css-, png- und htm-Dateien 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 so, dass sie auf jQuery, die MarkdownDeep-Bibliothek und die MarkdownDeep-CSS-Datei verweist (auch hier müssen Sie möglicherweise die Pfade ändern).

<link rel="stylesheet" href="https://stackoverflow.com/questions/5320922/mdd_styles.css" 
<script type="text/javascript" src="jQuery-1.4.2.min.js">
<script type="text/javascript" src="MarkdownDeepLib.min.js">

Hinweis: MarkdownDeepLib.min.js ist eine gepackte, 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 und wenn sie fehlen, erstellt das Plugin sie. Es kann jedoch vorkommen, dass die Seite während des Ladens herumspringt, wenn Sie dies tun. dh: es wird empfohlen, sie explizit einzuschließen.

4. Das MarkdownDeep jQuery-Plugin aufgerufen, um den Textbereich in einen MarkdownEditor umzuwandeln

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

Obwohl ich ihr Produkt wirklich mag Ich bin nicht mit den Machern von markdowndeep verbunden. Ich dachte nur, sie machten ein gutes Produkt

  • Vielen Dank. Das funktioniert wirklich. Aber leider ist der Editor nicht wirklich anpassbar. Beispielsweise können Sie das Vorschaufenster nicht deaktivieren. Wenn Sie es entfernen, wird es dynamisch erstellt. Also passe ich…

    – Krisztián Balla

    3. Juni 2014 um 11:57 Uhr


Benutzer-Avatar
Adze

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, das tut es NICHT Bereinigen Sie 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-Schwachstelle ausgesetzt.

Lesen Sie dies ab Stackoverflows Artikel auf Seite nach unten:

Es sollte beachtet werden, dass Markdown in Bezug auf Benutzereingaben nicht sicher ist. In Markdown ist so ziemlich alles gültig, insbesondere so etwas wie <script>doEvil();</script>. Dieses PageDown-Repository enthält die beiden Plugins, die Stack Exchange verwendet, um die Eingaben des Benutzers zu bereinigen; siehe die Beschreibung von Markdown.Sanitizer.js weiter unten.

Aus anderer Sicht sollte Markdown Ihre Eingabe vielleicht gar nicht bereinigen, und die MarkdownSharp-Implementierung entsprach nur diesen Prinzipien. Ich sollte erwähnen, dass Stackoverflow MarkdownSharp auf ihrer Serverseite verwendet.

1300460cookie-checkSo verwenden Sie ASP.NET MVC 3 und Markdown von Stack Overflow

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy