4

これは簡単なはずですが (少なくとも他の誰も同様の問題を抱えていないようです)、どこが壊れているのかわかりません。

アプリのページに入力されたデータベースにマークダウンされたテキストを保存しています。テキストは WMD を使用して入力され、ライブ プレビューは正しく表示されます。

別のページでは、マークダウン テキストを取得し、Showdown.js を使用して HTML クライアント側に変換して表示しています。

私がこのテキストを持っているとしましょう：

The quick **brown** fox jumped over the *lazy* dogs.

1. one
1. two 
4. three
17. four

jQueryドキュメントの準備完了イベントでこのJavascriptのスニペットを使用して変換しています:

var sd = new Attacklab.showdown.converter();
$(".ClassOfThingsIWantConverted").each(function() {
   this.innerHTML = sd.makeHtml($(this).html());
}

これが私の問題だと思いますが、ほとんど機能します。

FireFox では、期待どおりの結果が得られました。

素早い茶色のキツネは怠け者の犬を飛び越えました。

  1. 1
  2. 2
  3. 三
  4. 四

しかし、IE (7 および 6) では、次のようになります。

素早い茶色のキツネは怠け者の犬を飛び越えました。1. 1 1. 2 4. 3 17. 4

どうやら、IE は私のマークダウン コードのブレークを削除し、スペースに変換しているようです。(スクリプトを実行する前に) 元のコードのソースを表示すると、コンテナー DIV 内にブレークがあります。

私は何を間違っていますか？

アップデート

これは IE の innerHTML/innerText の「癖」が原因であり、データ バインドされたコントロールを使用する ASP.Net ページでこれについて言及する必要がありました。

4

2 に答える 2

5

問題を引き起こしたのは、Internet Explorer の innerHTML/innerText の「癖」でした。としてマークされていないすべての要素について<pre>、IE は Javascript に渡す前に空白を取り除きます。

<pre>Showdown によって生成された HTML が正しく表示されないため、タグにマークダウン テキストを含む要素を残すことはできませんでした。解決策は、一時的に a でラップしてから<pre>変更することでした。

ASP.Net コードは次のようになります。

<div class="ClassOfThingsIWantConverted">
    <pre><%# Eval("markdowntext") %></pre>
</div>

Javascript/jQuery は次のようになります。

var sd = new Attacklab.showdown.converter();
$(".ClassOfThingsIWantConverted").each(function() {
   this.html(sd.makeHtml($("pre",this).text()));
}

現在、両方のブラウザで正常に動作します...

于 2009-05-28T20:03:58.097 に答える
2

jQuery の有無にかかわらず Showdownを使用するのは簡単です。jQuery の例を次に示します。

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});
于 2010-05-02T18:13:54.680 に答える