web-dev-qa-db-ja.com

ASP.NET MVC 3とStackoverflow Markdownの使用方法

私は今数時間研究していて、これの本当の情報源を見つけることができませんでした。 ASP.NET MVC 3でサイトを構築していますが、StackOverflowが使用するMarkdownエディターを利用したいと思います。誰かが良いチュートリアルを持っていますか？

最新の値下げはどこからダウンロードしますか？それは何語で書かれていますか？これをMVC 3プロジェクトに統合するには、どこから始めればよいですか？私が行ったすべての検索と読書の後でも、私はまだかなり混乱しています。

1つのサイトに出くわしました。 http://daringfireball.net/projects/markdown/ しかし、これは風変わりに古く見え、CGIとPerlについて、まったく経験のないことを少し学ばなければならないようです。 javascript/jQueryバージョンは素晴らしいでしょう。どんなアイデア、リンク、リファレンスも大いに高く評価されています。

更新

私はこの質問がかなりの量の意見を得ていることに気づいたので、私はいくつかの役立つリファレンスでそれを更新することにしました。 Markdownエディターを CodeTunnel.com でうまく動作させることができ、それについていくつかのブログを書きました。うまくいけば、彼らはこの質問に遭遇した人を助けます。

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

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プロジェクトに統合

61
John Farrell

あなたはおそらく MarkdownSharp を探しています

スタックオーバーフローで紹介されている、MarkdownプロセッサのオープンソースC＃実装。

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. RxJをダウンロードし（ [〜＃〜] msdn [〜＃〜] から）、次の2つのjsファイルを含めます

    <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

私はこの質問が古いことを知っていますが、別の解決策を見つけました markdowndeep MVCと非常に友好的です

NugetPM> 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つのファイルを代わりに参照できます。

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のメーカーとは関係ありません。彼らは良い製品を作ったと思った

8
Ben Anderson

この質問は古くなっていますが、将来の読者が恩恵を受けることができるように、ここに回答を残しています。

MarkdownSharp v1.13を使用しましたが、HTML出力をサニタイズします[〜＃〜]（〜＃〜]。たとえば、次のように入力したとします。

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

入力フィールドのMarkdownSharpからの出力には、同じスクリプトが含まれています。したがって、それはあなたのWebサイトをXSS脆弱性にさらします。

PageDownの Stackoverflowの記事 からこれを読んでください。

Markdownは、ユーザーが入力する限り安全ではないことに注意してください。 Markdownではほとんど何でも有効です。特に<script>doEvil();</script>などです。このPageDownリポジトリには、Stack Exchangeがユーザーの入力をサニタイズするために使用する2つのプラグインが含まれています。以下のMarkdown.Sanitizer.jsの説明を参照してください。

したがって、別の観点から見ると、Markdownはそもそも入力を無害化することを想定しておらず、MarkdownSharpによる実装はそれらの原則に準拠しているだけです。 Stackoverflowはサーバー側でMarkdownSharpを使用していることを述べておきます。

2
Adze