Ajax 양식에 대한 WMD 편집기 (jQuery 버전)
-
20-09-2019 - |
문제
Ajax보다 WMD 편집기를 시도하고 있습니다. 여기 있습니다 버그가 지정된 코드
WDM 코드는 Github의 OpenLibrary Fork를 기반으로합니다
Ajax 없이는 매우 잘 작동합니다.
그러나 Ajax 양식에 편집기를 표시하려고하면로드되지 않습니다.
비 Ajax 버전은이 HTML을 생성합니다.
<div id="wmd-container">
<div id="wmd-button-bar"></div>
<div id="wmd-button-bar-0" class="wmd-button-bar"><ul class="wmd-button-row"><li style="background-position: 0px 0px;" title="Strong <strong> Ctrl+B" class="wmd-button wmd-bold-button"></li><li style="background-position: -20px 0px;" title="Emphasis <em> Ctrl+I" class="wmd-button wmd-italic-button"></li><li class="wmd-spacer"></li><li style="background-position: -40px 0px;" title="Hyperlink <a> Ctrl+L" class="wmd-button wmd-link-button"></li><li style="background-position: -60px 0px;" title="Blockquote <blockquote> Ctrl+Q" class="wmd-button wmd-quote-button"></li><li style="background-position: -80px 0px;" title="Code Sample <pre><code> Ctrl+K" class="wmd-button wmd-code-button"></li><li style="background-position: -100px 0px;" title="Image <img> Ctrl+G" class="wmd-button wmd-image-button"></li><li class="wmd-spacer"></li><li style="background-position: -120px 0px;" title="Numbered List <ol> Ctrl+O" class="wmd-button wmd-olist-button"></li><li style="background-position: -140px 0px;" title="Bulleted List <ul> Ctrl+U" class="wmd-button wmd-ulist-button"></li><li style="background-position: -160px 0px;" title="Heading <h1>/<h2> Ctrl+H" class="wmd-button wmd-heading-button"></li><li style="background-position: -180px 0px;" title="Horizontal Rule <hr> Ctrl+R" class="wmd-button wmd-hr-button"></li><li class="wmd-spacer"></li><li style="background-position: -200px -20px;" title="Undo - Ctrl+Z" class="wmd-button wmd-undo-button"></li><li style="background-position: -220px -20px;" title="Redo - Ctrl+Shift+Z" class="wmd-button wmd-redo-button"></li><li style="background-position: -240px 0px;" class="wmd-button wmd-help-button"><a title="WMD website" target="_blank" href="http://wmd-editor.com/"></a></li></ul></div><div id="wmd-button-bar-2" class="wmd-button-bar"></div><div id="wmd-button-bar-4" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-4" class="wmd-preview"></div><div id="wmd-preview-2" class="wmd-preview"></div><div id="wmd-preview-0" class="wmd-preview"></div>
</div>
Ajax 양식으로 :
<div id="wmd-container">
<div id="wmd-button-bar"></div>
<div id="wmd-button-bar-1" class="wmd-button-bar"></div><div id="wmd-button-bar-3" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-3" class="wmd-preview"></div><div id="wmd-preview-1" class="wmd-preview"></div>
</div>
도움이 있습니까?
해결책
여러 Textareas에 사용할 수있는 버전을 사용하고 있습니다. 컨트롤은 다음을 호출하여 시작됩니다.
setup_wmd({
"input": "user_about",
"button_bar": "user_about-button-bar",
"preview": "user_about-preview"
});
편집기가 "로드"에서 이벤트 리스너를 사용하여로드되는 문제 ID는 페이지가 완전히로드 될 때만로드됩니다. Ajax가로드되면 페이지가 이미로드 되어이 이벤트가 발사되지 않습니다. '
해결책
Util.StartEditor 메소드에서 라인을 교체합니다.
util.addEvent(top, "load", loadListener);
다음과 같은 것 :
if (ajaxForm) {
loadListener(); //this loads the editor immediately
} else {
util.addEvent(top, "load", loadListener);
}
변경 섹션의 상단 에이 라인을 추가 할 수 있습니다.
var ajaxForm = wmd_options.ajaxForm || false
따라서이 방법을 호출하여 편집기를 즉시로드 할 수 있습니다.
setup_wmd({
"input": "user_about",
"button_bar": "user_about-button-bar",
"preview": "user_about-preview",
"ajaxForm": true
});
따라서 AJAX 요청이로드되어 편집기를로드 한 후이 메소드를 호출 할 수 있습니다.
제휴하지 않습니다 StackOverflow