éditeur WMD (jquery version) sur les formulaires ajax

Question

J'essaie l'éditeur WMD sur ajax. ici il y a le bugged code

code wdm est basé sur la fourche OpenLibrary sur github

il fonctionne très bien sans ajax. Mais quand j'essaye d'afficher l'éditeur au-dessus de la forme d'ajax il ne charge pas.

version non ajax produire ce 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 &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> 

avec la forme 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> 

d'aide?

Answer 1

J'utilise la version où peut être utilisé pour plusieurs zones de texte. Le contrôle est lancé en appelant les éléments suivants:

setup_wmd({ 
    "input": "user_about", 
    "button_bar": "user_about-button-bar", 
    "preview": "user_about-preview" 
}); 

L'ID problème que l'éditeur est chargé à l'aide de l'écouteur d'événement sur « la charge », de sorte que son chargé uniquement lorsque la page est complètement chargée. Lorsque le formulaire ajax est chargé, cet événement ne se déclenche pas car la page est déjà chargée. '

Solution

Dans la méthode util.startEditor remplacer la ligne:

util.addEvent(top, "load", loadListener); 

avec quelque chose comme ceci:

if (ajaxForm) { 
    loadListener(); //this loads the editor immediately 
} else { 
    util.addEvent(top, "load", loadListener); 
} 

Vous pouvez ajouter cette ligne au sommet de la change la section

var ajaxForm = wmd_options.ajaxForm || false 

Vous pouvez appeler cette méthode pour charger l'éditeur immédiatement:

Vous pouvez maintenant appeler cette méthode après le chargement de demande ajax pour charger l'éditeur.