editor de armas de destrucción masiva (versión jQuery) sobre las formas ajax

Question

Estoy tratando editor de armas de destrucción masiva sobre Ajax. aquí está el código pinchado

Código de WDM se basa en tenedor OpenLibrary en github

funciona muy bien sin ajax.

pero cuando intento para mostrar editor sobre la forma Ajax no se carga.

versión no ajax producir este 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>

con forma 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>

ayuda?

Answer 1

Estoy usando la versión en la que se puede utilizar para múltiples áreas de texto. El control se inicia mediante una llamada al siguiente:

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

La Identificación del problema que el editor se carga usando el detector de eventos en "carga", por lo que su única carga cuando la página se ha cargado completamente. Cuando se carga el formulario ajax, este evento no se dispara como la página ya está cargado '.

Solución

En el método util.startEditor reemplazar la línea:

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

con algo como esto:

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

Puede añadir esta línea en la parte superior de la sección de cambios

var ajaxForm = wmd_options.ajaxForm || false

Así que usted puede llamar a este método para cargar el editor de inmediato:

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

Así que ahora puede llamar a este método después de las cargas petición Ajax para cargar el editor.