mooWMD

Including the script

Put the script tag as close to the closing </body> tag as possible.
    <script type="text/javascript" src='/path/to/scripts/moowmd.js'></script>
</body>

Including the CSS

Include the <moowmd.css> at the top of the page or incorporate it's code into your css. All the wmd element class names start with wmd So chances of colision with your CSS are slim to none.

Beware! WMD uses images, make sure the paths in the CSS to the images directory are correct!

Initial configuration

The following config options will affect the WMD everywhere on your application.

System wide configurations are hard coded into the JS file moowmd.js (feel free to write a more dynamic version and send it over to me, or fork it).
You can find the config area by looking for the string Configuration values, Or do it in mooWMD.Configuration. You will see comments in the code, and default values which makes it pretty easy to understand.

imageDialogText (HTML)

Text that will appear in the modal dialog box when pressing the insert image button.

linkDialogText (HTML)

Text that will appear in the modal dialog box when pressing the insert link button.

imageDefaultText (string)

Default text in the input field of the modal dialog box of the insert image button.

linkDefaultText (string)

Default text in the input field of the modal dialog box of the insert link button.

helpLink (string)

Link to a help site or page on how to use WMD (as client, not developer).

helpHoverTitle (string)

Title of the help link.

helpTarget (string)

Wether help page opens in same window or new window.

previewPollInterval (INT - miliseconds)

Interval of sampling the data in the text area, converting it to html and putting it in the preview div. This affects responsivnes/performance. This is the first value to play with if problems arise.

pastePollInterval (INT - miliseconds)

Not implemented or not sure as to it's effect

defaultButtons

Not implemented or not sure as to it's effect

version (INT)

Not implemented or not sure as to it's effect

output (ENUM)

'html' - on submit HTML will be sent to the server.
'markdown' - on submit MARKDOWN code will be sent to the server (Markdown is the format used in the WMD to mark the various elements. ** is <strong> for example.

lineLength (INT)

Not implemented or not sure as to it's effect

delayLoad (boolean)

Not implemented or not sure as to it's effect

Instance specific configuration

Those valus are specific for each instance of mooWMD in your page. They should be defined before the mooWMD is instantiated, as a JSON construct. Check the demo page to see example of each combination. NOTICE! Currently mooWMD expects an array of JSON constructs (one for each instance of WMD on the page). You must send it as an array even if you have only one instance in the page.

input

ID of the text area you want the mooWMD to be attached to. MANDATORY

postfix

A postfix the system will attach to the buttons elements IDs, and a value the system will use as default in case user does not supply the rest of the parameters. MANDATORY if there are more then one instance of mooWMD in the page.

preview

ID of the div where the preview of what is entered to the textarea is shown. If not supplied, the value wmd-preview + postfix is assumed. You still has to give this ID, hard coded in the markup, to the preview div. (feel free to supply a patch to make it more dynamic).OPTIONAL

output

ID of the div where the output text of what is entered to the textarea is shown (good for debug purposes, no need to create this element in production). If not supplied, the value wmd-output + postfix is assumed. You still has to give this ID, hard coded in the markup, to the output div. (feel free to supply a patch to make it more dynamic).OPTIONAL

After the array of JSON constructs is defiend, pass it as the sole parameter of mooWMD constructor. This has to happen in the domready event:
var WConfig=[
    {
        input: 'some-id',
        postfix: '2'
    },
    {
        input: 'another-id',
        postfix: '3',
        preview: 'a-previe-div-id'
    },
    {
        input: 'yet-another-id',
        preview: 'another-previe-div-id',
        output: 'a-output-div-id'
    }
];
window.addEvent('domready',function(){
    window.MyWMD=new mooWMD.WMD(window.WConfig);
    window.MyWMD.start();
}


Markup

In your HTML you will need the following markup:
<div id="wmd-editorXXX" class="wmd-panel">
    <div id="wmd-button-barXXX" class='wmd-button-bar'></div>
    <textarea name='some-name' id='some-id'></textarea>
</div>
<div id='wmd-previewXXX' class="wmd-preview"> </div>
<div id='wmd-outputXXX' class="wmd-preview"> </div>


XXX stands for the postfix you select for this instance of mooWMD.

You can either give the output and preview divs (or any other html container) the IDs I gave here, or your own IDs (without the postfix).

DEMO PAGE