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

【问题标题】：Browser dependent problem rendering WMD with Showdown.js?使用 Showdown.js 渲染 WMD 的浏览器相关问题？
【发布时间】：2009-05-28 15:58:12
【问题描述】：

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

我将 Markdown 文本存储在我的应用程序页面上输入的数据库中。文本是使用 WMD 输入的，实时预览看起来正确。

在另一个页面上，我正在检索 markdown 文本并使用 Showdown.js 将其转换回 HTML 客户端进行显示。

假设我有这个文本：

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

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

我在我的 jQuery 文档就绪事件中使用这个 Javascript 的 sn-p 来转换它：

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

我怀疑这是我的问题所在，但它几乎有效。

在 FireFox 中，我得到了我的预期：

敏捷的棕色狐狸跳过了懒惰的狗。

一个
两个
三个
四个

但在 IE（7 和 6）中，我明白了：

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

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

我做错了什么？

更新

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

【问题讨论】：

标签： javascript jquery internet-explorer firefox wmd

【解决方案1】：

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

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

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

【讨论】：

@CMPalmer - 太好了。接受你自己的答案是可以的。 +1
this.html 应该是 $(this).html
哇，这很烦人，直到我找到了这个答案。 Erik 是正确的，如果您只想更改单个元素，则可以使用以下方法：$("#adminContent").html(sd.makeHtml($("pre", $("#adminContent"))。文本（）））；

【解决方案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');
});

【讨论】：