DCODE - Lightweight Markup Kit

BBCode style editor and parser

This kit contains all the tools you need to add a lightweight markup language to your sites or admin systems. It is made up of 3 distinct parts that can be used together for an all-round experience or individually to fit your needs:

• A PHP parser
  that converts entagged strings into clean, semantic (X)HTML
• A Javascript Toolbar
  to enhance your <textarea> tags with a handy toolbar
• A Javascript Plugin cleverly called DCODR
  that intercepts CTRL+C on your site so that DCODE is copied instead of plain text! (see the DCODR page to believe it!)
• As well as full help and documentation

Using this kit will save you many hours of planning, programming and documenting, as well as add a very finished, professional element to your systems. Get on it.

Understanding DCODE

A good start is to read the help file that comes with the kit, but to sum up:

DCODE is a lightweight markup language similar to BBCode. It is designed to be a safe and simple way to let your users / vistors write pretty things while outputting valid (X)HTML

Demo and Download

• The demo shows all the features of DCODE
• Download DCODE v 0.9.7
• Usage / Integration instructions
• Read the changelog
• Browse the DCODE folder - for the curious

Tag conversions

The tags are converted in the following manner:

[LARGE]...[/LARGE]     => <h3>...</h3>
[MEDIUM]...[/MEDIUM]   => <h4>...</h4>
[HR]...[/HR]           => <div class="hr"><hr /></div>
[B]...[/B]             => <strong>...</strong>
[I]...[/I]             => <em>...</em>
[U]...[/U]             => <u>...</u>
[S]...[/S]             => <strike>...</strike>
                          <ul>
[*]...[/*]             =>   <li>...</li>
[*]...[/*]             =>   <li>...</li>
                          </ul>
                          <ol>
[#]...[/#]             =>   <li>...</li>
[#]...[/#]             =>   <li>...</li>
                          </ol>
[SUP]...[/SUP]         => <sup>...</sup>
[SUB]...[/SUB]         => <sub>...</sub>
[QUOTE]...[/QUOTE]     => <blockquote>...</blockquote>
[LINK=...]...[/LINK]   => <a href="...">...</a>
[IMG]...[/IMG]         => <img src="..." />
[YOUTUBE]...[/YOUTUBE] => A choice of output:
                          * <embed>
                          * SWFObject.js (1 or 2)

Usage / Integration

These instructions are broken up into 3 parts, one for each of; the PHP Parser; the Javascript Toolbar; and the Javascript Plugin. Note that the demo (included in the kit) is very easy to understand if you want to just jump on in!

PHP Parser

At it's most basic, 3 lines is all you need:

<?
  // Include the parser
  include_once ("./dcode/parse.inc");
  
  // Create the DCODE object
  $myDcode = new DCODE ();
  
  // Parse the string
  $parsed = $myDcode->parse ($yourStringHere);
?>

Note: You can set whether certain tags are turned on or off, and also how you would like your [YOUTUBE] tags to be output. Download the DCODE kit, and take a look at demo_response.php to see these methods explained.

Javascript Toolbar

Include the DCODE Javascript file:

<script type="text/javascript" src="/dcode/dcode.js"></script>

Then you can activate any of your <textarea> elements like so:

<textarea id="myInput">your content</textarea>
<script type="text/javascript">
  DCODE.activate ('myInput');
</script>

Note: Just like the PHP class, you can define the tags for the toolbar. Again, download the DCODE kit, and take a look at demo.html to see these methods explained.

Note: The toolbar can be easily styled, see the dcode.css file for a starting point.

Opening the helpdocs

The toolbar has a help button by default, but you can also open it at anytime by calling the DCODE.help (); function like so. Assuming you've included the DCODE Javascript file of course

Javascript Plugin, DCODR

The dedicated DCODR page has all the details about the plugin!