Браузер-зависимая проблема рендеринга ОМУ с Showdown.js? - PullRequest
Новая
       13

Браузер-зависимая проблема рендеринга ОМУ с Showdown.js?

4 голосов
/ 28 мая 2009

Это должно быть легко (по крайней мере, у кого-то, похоже, нет подобных проблем), но я не вижу, где оно ломается.

Я храню текст Markdown'а в базе данных, которая вводится на странице моего приложения. Текст вводится с использованием ОМП, и предварительный просмотр в реальном времени выглядит правильно.

На другой странице я извлекаю текст уценки и использую 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 я получаю то, что ожидал:

Быстрая коричневая лиса перепрыгнула через ленивых собак.

  1. один
  2. два
  3. три
  4. четыре

Но в IE (7 и 6) я получаю это:

Быстрая коричневая лиса перепрыгнула через ленивых собак. 1. один 1. два 4. три 17. четыре

Так что, очевидно, IE удаляет разрывы в моем коде уценки и просто конвертирует их в пробелы. Когда я выполняю просмотр исходного кода исходного кода (до запуска скрипта), внутри контейнера DIV возникают разрывы.

Что я делаю не так?

UPDATE

Это вызвано "причудой" IE innerHTML / innerText, и я должен был упомянуть ранее об этом на странице ASP.Net с использованием элементов управления с привязкой к данным - в противном случае, очевидно, существует множество различных обходных путей.

Ответы [ 2 ]

5 голосов
/ 29 мая 2009

Проблема была вызвана «причудой» InternetHnerHhml / innerText. Для всех элементов, которые не были помечены как <pre>, IE удаляет для них пробелы, прежде чем передать их в Javascript.

Я не мог просто оставить элемент с текстом уценки в тегах <pre>, потому что тогда HTML, сгенерированный Showdown, не будет отображаться правильно Решением было временно обернуть его в <pre>, а затем изменить.

Код ASP.Net теперь выглядит примерно так: 

<code><div class="ClassOfThingsIWantConverted">
    <pre><%# Eval("markdowntext") %>

И Javascript / jQuery выглядит так: 

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

теперь отлично работает в обоих браузерах ...

2 голосов
/ 02 мая 2010

Легко использовать Showdown с или без 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');
});
...