Question

这应该很容易（至少没有其他人似乎有类似的问题），但我看不出它在哪里破碎。

我将Markdown'ed文本存储在我的应用程序页面上输入的数据库中。使用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中，我得到了我的预期：

快速的棕色狐狸跳过了 lazy 狗。

一个
2
3
4

但是在IE（7和6）中，我得到了这个：

快速的棕色狐狸跳过了 lazy 狗。 1.一个1.两个4.三个17.四个

显然，IE正在剥离我的降价代码中断并将它们转换为空格。当我查看原始代码的视图源代码（在脚本运行之前）时，容器DIV中存在中断。

我做错了什么？

更新

它是由IE innerHTML / innerText“quirk”引起的，我之前应该在使用数据绑定控件的ASP.Net页面上提到这一点 - 否则显然会有很多不同的解决方法。

Answer 1

导致问题的是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()));
}

现在可以在两个浏览器上正常工作......

Answer 2

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

浏览器相关问题使用Showdown.js渲染WMD？

2 个答案: