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

Answer 1

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 2

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 3

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

Answer 4

This project may be a good start.