與Showdown.js渲染WMD的瀏覽器依賴問題？

這應該很容易（至少沒有人似乎有類似的問題），但我不明白它在哪裏打破。與Showdown.js渲染WMD的瀏覽器依賴問題？

我將Markdown'ed文本存儲在我的應用中的頁面上輸入的數據庫中。文本是使用WMD輸入的，實時預覽看起來是正確的。

在另一頁上，我檢索降價文本並使用Showdown.js將其轉換回HTML客戶端以進行顯示。

比方說，我有這樣的文字：

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

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

我使用JavaScript的這個片段我的jQuery的文件準備情況，將其轉化：

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

我懷疑這是我的問題是，但它差不多的作品。

在Firefox中，我得到了我的預期：

快速的棕色狐狸躍過懶狗。

一個

但在IE（7,6），我得到這個：

快速棕色狐狸跳過懶狗狗。 1.一個1.兩個4.三個17.四個

因此，顯然，IE是剝離我的markdown代碼中的休息，只是將它們轉換爲空格。當我執行原始代碼的查看源代碼（在腳本運行之前）時，中斷在容器DIV內部。

我在做什麼錯？

UPDATE

它是由IE的innerHTML/innerText屬性「怪癖」引起的，我應該在這之前已經提到的使用數據綁定控件這一個一個ASP.Net頁面上 - 顯然還有很多不同的另有解決方法。

來源

2009-05-28 CMPalmer

這是導致問題的Internet Explorer innerHTML/innerText「quirk」。對於未標記爲<pre>的所有元素，IE在將它們交給Javascript之前剝去它們的空格。

我不能在<pre>標記中留下含有降價文字的元素，因爲然後Showdown生成的HTML不會顯示正確。解決方法是暫時將其包裝在<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-28 20:03:58 CMPalmer

@CMPalmer - 這很好。可以接受你自己的答案。 +1 – 2009-05-28 20:08:14

這很容易use Showdown with or without jQuery。這裏有一個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-02 18:13:54

與Showdown.js渲染WMD的瀏覽器依賴問題？

回答

相關問題