Use "Updated WMD Editor" in textareas loaded by AJAX Forms

Question

We're trying to use Stackoverflow's excellent WMD / Markdown editor (http://blog.stackoverflow.com/2009/01/updated-wmd-editor/, http://github.com/derobins/wmd/tree/master) on a Symfony project.

This works excellent on textareas without any AJAX involved. But when we have to include wmd.js first, and then later on user interaction (i.e. "click on link") have the textarea loaded via AJAX we utterly fail to make WMD work, Firebug is giving us

elem is null

addEvent()()wmd.js (Linie 110)
setupEvents()()wmd.js (Linie 1790)
init()()wmd.js (Linie 1970)
previewManager()()wmd.js (Linie 1987)
loadListener()()wmd.js (Linie 1763)

[Break on this error] if (elem.attachEvent) {

on loading the page (i.e. before textarea loading).

Symfony's AJAX Loader seems to eval() everything between tags. We tried including the whole script directly between those tags, we tried escaping this and that, but had no success with differnt errors coming up.

At this point we think we have to include the script in the normal page and after the AJAX call we have to initiate WMD manually - what functions do we have to call? Are we completely off track and need to use a different approach?

Thank you!

Answer 1

Hello there,

drobins fork of wmd on github is solving the AJAX issues as well.

Answer 2

You can use my version. Simply put the constructor call, config values and the call to the start() method in the callback function that handles the results you get from the AJAX request. My version of mooWMD.

Answer 3

I had this same issue and I initialize WMD once my textarea has been added to the page asynchronously.

Heres my code:

function loadTextEditor()
{
    var instances = [];

    if (!Attacklab || !Attacklab.wmd) {
                alert("WMD hasn't finished loading!");
                return;
            }
    /***** build the preview manager *****/
    var textArea = document.getElementById('postcontent');
    var previewPane = document.getElementById('postPreview');

    var panes = {input:textArea, preview:previewPane, output:null};
    var previewManager = new Attacklab.wmd.previewManager(panes);

    /***** build the editor and tell it to refresh the preview after commands *****/
    var editor = new Attacklab.wmd.editor(textArea,previewManager.refresh);

    // save everything so we can destroy it all later
    instances.push({ta:textarea, div:previewDiv, ed:editor, pm:previewManager});

}