Javascript enabled browser
PHP – for accesskeys.

Demo

The demo is available at: http://www.quirm.net/markdown/

Download

Remember you will need a copy of markdown.
http://www.michelf.com/projects/php-markdown/ or
http://daringfireball.net/projects/markdown/

Settings

On your page you will need to add in the following:

<script src="toolbar.js" type="text/javascript"></script>
<script src="textarea.js" type="text/javascript"></script>
<script src="onload.js" type="text/javascript"></script>
<script type="text/javascript" src="prototype.js"></script>
<link rel="stylesheet" type="text/css" href="test.css" />

In toolbar.js you can amend the following:

• addtothisbit = 'canvas';
  This is the id of the textarea to add the toolbar to.
• locationofakeys = 'accesskeys.php';
  This is the path to the accesskey script set to ” if not used.
• locationofpreviewscript = 'preview.php';
  The path to the preview script. The example includes a simple preview.php script. However it should be possible to change this to use the original perl script, and hence PHP would not be required.
• colour1='#ffb';
  The standard button colour
• colour2='#fde';
  The standard more/less button colour
• colour3='#cdf';
  The preview button colour
• colour4='#cfd';
  The edit button colour
• colour5='#eee';
  The disabled button colour (when previewing your markdown).
• colour6='#cfd';
  The highlighted (open tag) standard button colour

The buttons have been preset for markdown, however they can be easily changed to accomodate other systems, including standard markup or BBCode. The buttons configuration starts on line 177 or thereabouts of toolbar.js.

If access keys are used then you also need to adapt the $links array in accesskeys.php, this should match the accKey you set for each toolbar button, though you can add spaces.

The CSS also references these colours and would need to match:

/* toolbar settings */
/* need to match your javascript colours */
#ed_extra_toolbar input, #ed_toolbar input{
    padding:2px;
    color:#000;
    /*variable colour1*/
    background:#ffb;
    margin-right:2px;
    font-size:80%;
}

#ed_toolbar input#ed_preview{
    /*variable colour3*/
    background:#cdf;
    width:5em;
}
#ed_toolbar input#ed_extra_show,#ed_extra_toolbar input#ed_extra_hide{
    /*variable colour2*/
    background:#fde;
}

The scripts should then be integrated. Although these scrips are unsupported, feel free to discuss them on our forums.

There are a lot of WYSIWYG utilities out there, but very few create good mark-up. Even fewer enable you to edit the text without having to sift through mark-up that may be unintelligible. This is where Markdown is useful, but, until now, without a toolbar users have had to remember the syntax.

These scripts are designed to fill that gap but a few extras have also been added to enhance the experience.

Firstly Increase/Decrease links have been added to allow authors to change the size of the main textarea at will.

Secondly, there is now an option to set access keys. Not everyone uses accesskeys, so, by default, none are set. But if you do require keyboard shortcuts, you can define as many, or as few, of your own as you want.

Finally the added extra that has not been widely available, at least for Markdown – an instant preview.

I use PHP Markdown which is available from http://www.michelf.com/projects/php-markdown/ and was originally developed by Michel Fortinas a PHP port of the original Perl version by John Gruber. The orginal can be found at

http://daringfireball.net/projects/markdown/.

I would like to thank the following people for allowing me to use their scripts:

• Alex King – I heavily modified his quicktags script.
• Gez Lemon – Increase/decrease textarea script.

To enable the preview I utilised prototype.js from http://prototype.conio.net/ and the example on http://www.i-marco.nl/weblog/pivot/entry.php?id=325

As the preview was dependant on javascript, I did originally try to utilise the editable accesskeys script from http://golem.ph.utexas.edu/~distler/blog/archives/000723.html. However following some unsolvable errors (probably just integrating issues), I had to abandon that approach and utilised my own PHP accesskey class instead.

PHP is not required to get the main scripts to work, but you, without it, you will not be able to use the accesskeys option.

For download and instructions please see the Markdown Toolbar installation post.