ajax 表单上的 wmd 编辑器（jquery 版本）

Question

我正在通过 ajax 尝试 wmd 编辑器。 这里有bugged code

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 &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

我正在使用可用于多个文本区域的版本。通过调用以下命令来启动控件：

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 请求后调用此方法来加载编辑器。