Multiple WMD editors (SO forked version) on one page?

Question

To be clear, I'm referring to the usage of stackoverflow's forked WMD, not the original version from attacklab.

I'd like to use the forked version, however it seems that the div id's which are used by the script to identify the page elements to WMDify are hardcoded in wmd.js:66:

// A collection of the important regions on the page.
// Cached so we don't have to keep traversing the DOM.
wmd.PanelCollection = function(){
    this.buttonBar = doc.getElementById("wmd-button-bar");
    this.preview = doc.getElementById("wmd-preview");
    this.output = doc.getElementById("wmd-output");
    this.input = doc.getElementById("wmd-input");
};

If I just wanted to use different region names I'd be fine on my own—but I want to use a variable number of WMD editors on a single page. I'd need a way to tell each instance of WMD about the page regions it should affect, but I don't see any 'hooks' for that.

The not-seeing is likely a product of my almost complete lack of js knowledge. The Right Thing To Do™ is to just learn javascript properly, but I'm in the middle of a project with a deadline. I'd really like to use this version of WMD but I need some clues on how to go about modifying the WMD script, or perhaps simply an example of how to call it in such a fashion that I can speficy which div id's to use.

Clues appreciated!

Answer 1

I had similar problems so I re-factored WMD to be able to do just that. my version of wmd

Recently, I rechecked this. The version in Google code supports multiple versions on a page.
google code fork and is the latest out there.

Answer 2

On a "project with a deadline" it is allowed to hack around some constraints. In this case I would just make multiple copies of the WMD editor script (or generate it on the server side) and replace the IDs by your needed identifiers. That way you can immediately deploy multiple WMDs on a single page.

You just have to be really clear about one thing: You are accruing technical debt ("the eventual consequences of slapdash software architecture and hasty software development") on your project there. You will have to revisit this to pay back this debt or you will drown in interest payments when doing maintenance.

Answer 3

Line 2339 of wmd.js may be a good place to start:

Attacklab.wmd_defaults = {version:1, output:"HTML", lineLength:40, delayLoad:false};

Add an option for each div id you need to change.

You override these settings by adding a script block before including wmd.js, for example:

<script type="text/javascript">wmd_options = {"output": "Markdown"};</script>

Then change the wmd.PanelCollection function to..

wmd.PanelCollection = function(){
        this.buttonBar = doc.getElementById(wmd.wmd_env["wmd-button-bar"]);
        this.preview = doc.getElementById(wmd.wmd_env["wmd-preview"]);
        this.output = doc.getElementById(wmd.wmd_env["wmd-output"]);
        this.input = doc.getElementById(wmd.wmd_env["wmd-input"]);
};

Note this is totally untested, and may not work, but compared to auto-generating the WMD editor or making multiple copies it's slightly more elegant..

Edit: I tried making the edits, but it's not quite as simple as adding to wmd_defaults - various items (mainly the button-bar) use an ID rather than a class, but, it's close..

Edit 2: After much fiddling, I would say the answer is basically "no".

A better answer is no, not without some fairly large changes to WMD (changes that are beyond my very limited javascript experience)..

I tried moving all the hard-coded div names to settings, and added a "elementNamePrefix" setting for all the button class names, rather than use "wmd-spacer1" it used wmd.wmd_env["elementNamePrefix"] + "spacer1"... but even with this you need to duplicate items in the CSS file, and the changes caused weird behaviour I couldn't fix (I think because of the global AttackLab variable defined on the first line? Not sure)..

Perhaps, as an alternative to having multiple WMD controls, you could have a drop-down which loads different posts via AJAX? It would certainly be easier than modifying WMD to allow multiple instances..

Answer 4

This project may be a good start.