代码之家 › 专栏 › 技术社区 › CMPalmer

使用showdown.js呈现WMD时浏览器相关的问题?

wmd firefox internet-explorer jquery javascript

4

CMPalmer · 技术社区 · 17 年前

这应该很容易(至少没有其他人有类似的问题),但我看不到它在哪里断裂。

我将标记的文本存储在应用程序页面上输入的数据库中。使用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());
}

我怀疑这就是我的问题所在,但是几乎作品。

在火狐中,我得到了我所期望的:

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

一
二
三
四

但在IE(7和6)中,我得到了:

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

所以很明显,我正在剥离我的降价代码中的漏洞,并将其转换为空格。当我查看原始代码的源代码时(在脚本运行之前),中断在container div中。

我做错什么了?

更新

它是由ie innerhtml/innertext“quirk”引起的,我之前应该在使用数据绑定控件的ASP.NET页面上提到过这一点,否则显然有很多不同的解决方法。

2 回复 | 直到 16 年前

1

5

CMPalmer 17 年前

正是Internet Explorer InnerHTML/InnerText“怪癖”导致了这个问题。对于所有未标记为的元素 <pre> ,即在将它们交给javascript之前为它们删除空白。

我不能把元素和标记文本放在一起 <预科; 标记,因为这样决战生成的HTML就不会正确显示。解决方法是将它临时包装在 <预科; 然后改变它。

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

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

2

Mathias Bynens 16 年前

很容易做到 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');
});