AJAX形式的wmd編輯器（jQuery版本）

Question

我想通過ajax的WM編輯器。 這裏存在bugged code

WDM代碼是基於openlibrary叉GitHub上

它的工作非常好沒有Ajax。

但是當我嘗試顯示編輯器超過ajax窗體它不會加載。

非AJAX版本製作這個網站：

<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 &lt;strong&gt; Ctrl+B" class="wmd-button wmd-bold-button"></li><li style="background-position: -20px 0px;" title="Emphasis &lt;em&gt; Ctrl+I" class="wmd-button wmd-italic-button"></li><li class="wmd-spacer"></li><li style="background-position: -40px 0px;" title="Hyperlink &lt;a&gt; Ctrl+L" class="wmd-button wmd-link-button"></li><li style="background-position: -60px 0px;" title="Blockquote &lt;blockquote&gt; Ctrl+Q" class="wmd-button wmd-quote-button"></li><li style="background-position: -80px 0px;" title="Code Sample &lt;pre&gt;&lt;code&gt; Ctrl+K" class="wmd-button wmd-code-button"></li><li style="background-position: -100px 0px;" title="Image &lt;img&gt; Ctrl+G" class="wmd-button wmd-image-button"></li><li class="wmd-spacer"></li><li style="background-position: -120px 0px;" title="Numbered List &lt;ol&gt; Ctrl+O" class="wmd-button wmd-olist-button"></li><li style="background-position: -140px 0px;" title="Bulleted List &lt;ul&gt; Ctrl+U" class="wmd-button wmd-ulist-button"></li><li style="background-position: -160px 0px;" title="Heading &lt;h1&gt;/&lt;h2&gt; Ctrl+H" class="wmd-button wmd-heading-button"></li><li style="background-position: -180px 0px;" title="Horizontal Rule &lt;hr&gt; 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> 

任何幫助嗎？

Answer 1

我使用的版本可以用於多個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 

所以，你可以調用此方法來立即加載編輯：

所以你現在可以調用此方法Ajax請求加載後加載的編輯器。