Question

I’m trying to hook PageDown into my Rails app, because the Markdown editor is awesome.

However, I’m finding this difficult because Rails auto-assigns ids via form helpers, and PageDown expects the id “wmd-input” to be assigned to a textarea field. In my model I have a text property named “body” that I want to serve as the editor, but f.text_area :body yields a textarea with the id post_body.

So, my current approach is to tell PageDown to associate the editor with a textarea with a particular class name rather than associating it with a particular ID. This is where I’m confused as to how to proceed. Here’s a link to Markdown.Editor.js.

Navigate to function PanelCollection(postfix) { (on line 244). I want to change the third line in that function from:

this.input = doc.getElementById("wmd-input" + postfix);

to

this.input = doc.getElementsByClassName("wmd-input" + postfix)[0];

I’ve never done anything like this. Also, editing the source for Markdown.Editor.js isn’t really an option since it is auto-generated. I need to alter the function after it’s been created. How can I do this?

EDIT #1:

So, this was my first time forking and contributing back to anything on GitHub, but I forked the pagedown-rails gem and made my change and ensured it worked by connecting the gem listed in my Gemfile to my fork. Worked beautifully, thanks for the suggestion. I contributed back via this pull request.

Answer 1

It’s a major hack, but you could accomplish it by overriding document.getElementById() to delegate to document.getElementsByClassName() if the passed string starts with 'wmd-input':

var doc = document;
doc.__getElementByIdOrig = doc.getElementById;
doc.getElementById = function (idStr) {
    if (idStr.match(/^wmd-input/)) {
        var elt = this.getElementsByClassName(idStr)[0];
        return elt ? elt : null;
    }

    return this.__getElementByIdOrig(idStr);
};