브라우저 종속 문제 렌더링 WMD가 Showdown.js?

Question

이것은 쉬워야합니다 (적어도 다른 사람은 비슷한 문제가있는 것 같습니다).

앱의 한 페이지에 입력 된 데이터베이스에 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 스 니펫을 사용하고 있습니다.

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. 2 4. 셋 17. 4

따라서 즉, 즉, 마크 다운 코드에서 브레이크를 제거하고 공간으로 변환하는 것입니다. 원래 코드의 뷰 소스 (스크립트 실행 전에)를 볼 때, 브레이크는 컨테이너 div 내부에 있습니다.

내가 뭘 잘못하고 있죠?

업데이트

IE InnerHTML/InnerText "Quirk"에 의해 발생하며, 데이터 경계 컨트롤을 사용하는 ASP.NET 페이지 의이 제품이 이전에 언급되어야합니다. 그렇지 않으면 많은 다른 해결 방법이 있습니다.

Answer 1

인터넷 익스플로러 내부 텍스트 "Quirk"는 문제를 일으킨 것은 인터넷 익스플로러 내부 텍스트였습니다. 표시되지 않은 모든 요소에 대해 <pre>, 즉, JavaScript로 나눠주기 전에 그들을 위해 공백을 벗겨냅니다.

마크 다운 텍스트로 요소를 남길 수 없었습니다. <pre> 대결에 의해 생성 된 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()));
}

이제 두 브라우저에서 잘 작동합니다 ...

Answer 2

쉽습니다 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');
});