BBCode editor

What is BBCode

Bulletin Board Code or BBCode is a lightweight markup language used to format posts in many message boards. BBCode was devised to provide a safer, easier and more limited way of allowing users to format their messages.

The available BBCode tags are indicated by square brackets ([ ]) surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand (usually HTML or XHTML). For example, string This is [b] bold [/b] text give us This is bold text. The basic difference between BBCode and HTML is that while HTML uses angle brackets (< >) to surround tags, BBCode requires that you use square brackets ([ ]).

The basic BBCode tags are often very similar across many different forums, but there may be some differences as well. You can find more information about BBCode and BBCode tags reference at http://www.bbcode.org.

BBCode editor

As soon as you’ve decided to implement BBCode in your software product, we propose you to examine the jquery.BBCode plugin. This Jquery library plugin is a simple BBCode editor, which can be easily placed on any website. It allows inserting the BBCode on selected text in textarea.

Supported BBCode tags:

• bold, [b]
• italic, [i]
• underline, [u]
• link, [url]
• image, [img]

Enclosed shortcuts:

• CTRL+B – Bold
• CTRL+I – Italic
• CTRL+U – Underline

How to install and configure

Download the plugin here. Extract the files and upload them to your server. Note that bbcode.htm is added as an example of the editor use and may be removed.

Place a textarea element on the page, where you plan to use the BBCode editor. This element can have any attributes you find necessary to have. The only mandatory attribute is id, which is used to identify the textarea element.

<textarea id="test" name="test" style="width:500px; height: 200px;> Some text</textarea>

If you wish to display an automatic preview of the text typed in the textarea element, add a DIV element below the textarea.

<H5>Preview</H5>
<DIV id=preview style="BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 3px; 
BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #c0c0c0 1px solid; WIDTH: 500px; 
PADDING-TOP: 3px; BORDER-BOTTOM: #c0c0c0 1px solid; HEIGHT: 200px"></DIV>

Add the following code to the same page. Note that process() function implements an automatic preview.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src='jquery.bbcode.js' type='text/javascript'></script>
<script type=text/javascript>
  $(document).ready(function(){
    $("#test").bbcode({tag_bold:true,tag_italic:true,tag_underline:true,tag_link:true,tag_image:true,button_image:true});
    process();
  });
  
  var bbcode="";
  function process()
  {
    if (bbcode != $("#test").val())
      {
        bbcode = $("#test").val();
        $.get('bbParser.php',
        {
          bbcode: bbcode
        },
        function(txt){
          $("#preview").html(txt);
        })
      }
    setTimeout("process()", 2000);
  }
</script>

Don’t forget to update a path to the jquery.bbcode.js file there. Also make sure that the id value of the textarea element and the value inside of $(“#test”).bbcode() is the same.

If you now open your webpage in the browser, you should see the textarea element as shown below.

Some [b]sample[/b] text

Preview

The jquery.BBCode plugin accepts the following parameters:

To send information from a textarea element to the server, you can use the HTML form. To convert BBCodes to HTML, use the bbParser class defined in the bbParser.php.

The following example explains how to use the bbParser class.

<?php
  $parser = new bbParser();
  $text = $parser->getHtml($_POST['test']);
?>