web-dev-qa-db-fra.com

Comment utiliser ASP.NET MVC 3 et Stackoverflow Markdown

Je fais des recherches depuis quelques heures maintenant et je n'ai pas trouvé de vraies sources pour cela. Je crée un site dans ASP.NET MVC 3 et je voudrais profiter de l'éditeur Markdown que StackOverflow utilise. Quelqu'un at-il un bon tutoriel?

Où téléchargez-vous la dernière démarque? Dans quelle langue est-il écrit? Par où commencer pour intégrer cela dans un projet MVC 3? Même après toutes les recherches et lectures que j'ai faites, je suis encore assez confus.

Je suis tombé sur un site. http://daringfireball.net/projects/markdown/ Mais cela semble étrangement vieux et il semblerait que je devrais apprendre un petit quelque chose sur CGI et Perl avec lequel je n'ai absolument aucune expérience. Une version javascript/jQuery serait splendide. Toutes les idées, liens, références sont beaucoup plus appréciés.

METTRE À JOUR

J'ai remarqué que cette question obtient un bon nombre de vues, j'ai donc décidé de la mettre à jour avec quelques références utiles. J'ai réussi à faire fonctionner un éditeur Markdown sur CodeTunnel.com et j'ai écrit quelques blogs à ce sujet. J'espère qu'ils aideront toute personne rencontrant cette question.

c#jqueryasp.net-mvcasp.net-mvc-3markdown
70
Chev

Stackoverflow open a fourni sa version de Markdown au monde entier. 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 cherchez comment implémenter un éditeur javascript, il y a une question existante: Intégrer l'éditeur de texte Markitup au projet ASP.NET MVC

61
John Farrell

Vous recherchez probablement MarkdownSharp

Implémentation open source C # du processeur Markdown, comme indiqué sur Stack Overflow.

Pour l'intégrer dans une application MVC:

  1. Dans un contrôleur jusqu'à ou commun, ajoutez la méthode d'action suivante

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

  2. dans votre vue côté client:

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

  3. et JS côté client:

    $(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. Téléchargez RxJs (depuis MSDN ) et incluez les deux fichiers js suivants

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

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

Il peut être installé via nuget PM> Install-Package MarkdownDeep.Full

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);

Éditeur

1.Copiez les fichiers js, css, png et htm fournis sur votre serveur. Selon l'endroit où vous placez ces fichiers sur votre serveur, vous devrez peut-être mettre à jour les URL des images dans le fichier css.

2.Mettez à jour votre page pour référencer jQuery, la bibliothèque MarkdownDeep et le fichier css MarkdownDeep (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 une version compactée et minifiée de MarkdownDeep.js, MarkdownDeepEditor.js et MarkdownDeepEditorUI.js. Pour le débogage, vous pouvez référencer ces trois fichiers à la place.

3.Insérez l'éditeur Markdown 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 divs associés sont tous facultatifs et s'ils sont manquants, le plugin les créera. Cependant ... vous pourriez rencontrer la page qui saute pendant le chargement si vous faites cela. c'est-à-dire: il est recommandé de les inclure explicitement.

4.Appelé le plugin MarkdownDeep jQuery pour convertir la zone de texte en MarkdownEditor

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

Bien que j'aime vraiment leur produit je ne suis pas affilié aux fabricants de markdowndeep. Je pensais juste qu'ils faisaient un bon produit

8
Ben Anderson

Cette question est ancienne, mais je laisse juste une réponse ici pour que les futurs lecteurs puissent en bénéficier.

J'ai utilisé MarkdownSharp v1.13, il ne [~ # ~] pas [~ # ~] désinfecte votre sortie html. Par exemple, si vous tapez:

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

Dans votre champ de saisie, la sortie de MarkdownSharp contient le même script. Ainsi, il expose votre site Web à la vulnérabilité XSS.

Lisez ceci dans article de Stackoverflow sur PageDown:

Il convient de noter que Markdown n'est pas sûr en ce qui concerne les entrées saisies par l'utilisateur. À peu près tout est valide dans Markdown, en particulier quelque chose comme <script>doEvil();</script>. Ce référentiel PageDown comprend les deux plugins que Stack Exchange utilise pour filtrer l'entrée de l'utilisateur; voir la description de Markdown.Sanitizer.js ci-dessous.

Donc, d'un autre point de vue, Markdown n'était peut-être pas censé purifier votre entrée en premier lieu et la mise en œuvre de MarkdownSharp se conformait simplement à ces principes. Je dois mentionner que Stackoverflow utilise MarkdownSharp du côté serveur.

2
Adze