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!

Recurrent

can anybody help me with this #3617288 – Nil

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.

Horsy

Seems to be a problem in the server. I need to find a different place to host this. If you wish - send me an email, I will send you the files. – Horsy

I am trying to do this same exact thing. Any one have a working link for this version that allows it? – Algometer

send me an email, I will send you a working copy of the site moowmd.awardspace.info – Horsy

@ItayMoav it does allow for multiple editors on a single page assuming they have different ids and initialize a wmd editor for each. – Setscrew

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.

Laddie

Ah, I didn't completely specify: I need to use variable numbers of editors on each page based on the content. And yes, if the quick solution is too hackish I will simply forgo wmd this time around in favor of another solution. There's a limit to allowed hackery. :) – Recurrent

for a variable number of wmds you can go down the generate-wmd-source-with-servers-side-script. If you do that right, it should be pretty easy to convert that to a JS-parameterised single-source solution. – Laddie

I tried this and even with multiple .js files I cannot seem to get it to work. It will only load the buttons on the first text area. If I remove the first one, the buttons load fine for the second text area. I've dug through the JS and made sure all references were updated but still no luck. – Algometer

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..

Traffic

Answer 4

This project may be a good start.

Usanis