Change existing JavaScript object functions with prototype?

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);
};