quirm.net
wordpress & web design

Markdown Toolbar Installation

Requirements

Javascript enabled browser
PHP – for accesskeys.

Demo

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

Download

MarkDown Toolbar (23.7 KiB)

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.

• .htpasswd Creator,
• Date to UTC,
• Sphidermap Class