محرر WMD (إصدار jQuery) على نماذج Ajax

Question

أحاول محرر WMD على Ajax. هنا هناك رمز التنصت

يعتمد رمز WDM على شوكة OpenLibrary على Github

تعمل بشكل جيد للغاية بدون أياكس.

ولكن عندما أحاول عرض المحرر على نموذج 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

أنا أستخدم الإصدار حيث يمكن استخدامه في Textareas متعددة. يبدأ التحكم عن طريق الاتصال بما يلي:

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

معرف المشكلة الذي يتم تحميل المحرر باستخدام مستمع الحدث على "Load" ، لذلك يتم تحميله فقط عند تحميل الصفحة بالكامل. عندما يتم تحميل نموذج 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 لتحميل المحرر.