70 votes

Comment utiliser ASP.NET MVC 3 et le Markdown de Stackoverflow

J'ai fait des recherches pendant quelques heures maintenant et je ne pouvais pas trouver tout de véritables sources pour cela. Je suis en train de construire un site en ASP.NET MVC 3 et souhaitez bénéficier de la Minoration de l'éditeur que StackOverflow utilise. Quelqu'un at-il un bon tutoriel?

Où voulez-vous de télécharger la dernière démarque? Quelle langue est-il écrit? Où dois-je commencer à l'intégrer dans un MVC 3 projet? Même après toutes les recherches et de la lecture, je l'ai fait, je suis encore assez confus.

Je suis tombé sur un site. http://daringfireball.net/projects/markdown/ Mais ce qui semble bourré de vieux, et il semblerait que j'aurais à apprendre un petit quelque chose à propos de CGI et PERL qui je n'ai absolument aucune expérience avec. Un javascript/jQuery version serait splendide. Des idées, des liens, des références sont beaucoup beaucoup beaucoup apprécié.

Mise à JOUR

J'ai remarqué cette question est d'obtenir une juste quantité de points de vue, alors j'ai décidé de le mettre à jour avec quelques références utiles. J'ai réussi à obtenir un Abattement de l'éditeur fonctionne parfaitement sur CodeTunnel.com et j'ai écrit quelques blogs à ce sujet. J'espère qu'ils aider toute personne qui vient à travers cette question.

62voto

jfar Points 19380

Stackoverflow open source leur version de Markdown pour le monde. Son appelé MarkdownSharp et est écrit en C#.

Quelqu'un a écrit un HtmlHelper ici: http://blog.dantup.com/2011/03/an-asp-net-mvc-htmlhelper-extension-method-for-markdown-using-markdownsharp

Si vous êtes à la recherche pour savoir comment mettre en œuvre un éditeur de javascript il existe déjà une question: Intégrer Markitup éditeur de texte pour ASP.NET projet MVC

43voto

Scott Weinstein Points 11404

Vous êtes probablement à la recherche pour MarkdownSharp

Open source C# de mise en œuvre de Markdown processeur, comme présenté sur un Débordement de Pile.

Afin de l'intégrer dans une application MVC:

a) Dans une ou jusqu'à ce que contrôleur commun, ajoutez la ligne suivante de la méthode d'action

    public ActionResult FormatMarkdown(string markdownText)
    {
        var md = new MarkdownSharp.Markdown();
        string html = md.Transform(markdownText);
        return Json(html, JsonRequestBehavior.AllowGet);
    }

b) dans votre client de la vue de côté:

@Html.TextArea("mdText", new { rows = 12, cols = 60 })
<div id="mdFormatted"></div>

c) et côté client en 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);
    })

d) Télécharger RxJs (à partir de http://msdn.microsoft.com/en-us/devlabs/ee794896) et regroupent deux fichiers js

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

8voto

Ben Anderson Points 1454

Je sais que cette question est vieux, mais je suis tombé sur une autre solution markdowndeep qui est très sympathique avec MVC

Il peut être installé via nuget H> Install-Package MarkdownDeep.Plein

Markdown en C#

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

L'éditeur

1.Copiez le fourni js, css, png et htm fichiers sur votre serveur. Selon l'endroit où vous placez ces fichiers sur votre serveur, vous pourriez avoir besoin de mettre à jour l'url de l'image dans le fichier css.

2.Mise à jour de votre page pour faire référence à jQuery, la MarkdownDeep de la bibliothèque et de la MarkdownDeep fichier css (encore une fois, vous devrez peut-être modifier les chemins d'accès).

<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 est un emballés, version compacte de MarkdownDeep.js, MarkdownDeepEditor.js et MarkdownDeepEditorUI.js. Pour le débogage, vous pouvez faire référence à ces trois fichiers à la place.

3.Insérez la Démarque de l'éditeur dans votre page comme ceci:

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

Remarque: les associés divs sont tous facultatifs et si elle est manquante, le plugin va créer. Cependant... vous risquez de rencontrer la page sautant au cours du chargement, si vous faites cela. c'est à dire: il est recommandé d'inclure explicitement.

4.Appelé le MarkdownDeep plugin jQuery pour convertir le textarea d'un MarkdownEditor

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

Bien que j'aime vraiment leurs produits je ne suis pas affilié avec les responsables de markdowndeep. J'ai juste pensé, ils ont fait un bon produit

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X