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.
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:
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.
If you wish to display an automatic preview of the text typed in the textarea element, add a DIV element below the textarea.
Add the following code to the same page. Note that process() function implements an automatic preview.
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.
The jquery.BBCode plugin accepts the following parameters:
|tag_bold||display/donít display the "Bold " button||true or false||true|
|tag_italic||display/donít display the "Italic" button||true or false||true|
|tag_underline||display/donít display the "Underline" button||true or false||true|
|tag_link||display/donít display the "Link" button||true or false||true|
|tag_image||display/donít display the "Image" button||true or false||false|
|button_image||display the buttons as images or text||true or false||true (display as images)|
|image_url||a path to the buttonsí images||<path>||'bbimage/'|
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.
Back to top
|Copyright © 2005-2007 www.WebCheatSheet.com All Rights Reserved.|