4

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

我将 Markdown 文本存储在我的应用程序页面上输入的数据库中。使用 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. 一
  2. 二
  3. 三
  4. 四

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

敏捷的棕色狐狸跳过了懒惰的狗。1. 一 1. 二 4. 三 17. 四

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

我究竟做错了什么？

更新

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

4

2 回答 2

5

导致问题的是 Internet Explorer innerHTML/innerText “怪癖”。对于所有未标记为 的元素<pre>，IE 会在将它们交给 Javascript 之前为它们去除空格。

我不能只在<pre>标签中留下带有 markdown 文本的元素，因为这样 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 回答