Corpocrat Blog

WYSIWYG BBCode Editor in Javascript

A simple homemade and lightweight free to use textarea bbcode editor written in javascript. Although not complex it has all the basic bbcode functions like hyperlink, quote and code tages.

- Fast loading and lightweight
- Works in IE and Firefox
- No popup html window for inserting hyperlinks.
- Easy to integrate

You can use it FREE either for personal or commercial purpose or do whatever you want with this script.

Demo

Download (5kb)

Free Icons

If you want to customize the editor with new icons you can download silk icons set. It is free!

How to Install

1. Just extract the folder and upload bbeditor folder to your server. All the editor code and images are inside that folder. You should not run any php scripts inside this folder. Any html or php script calling this editor must above and outside this folder

2. Create a PHP script or html page (ex: example.php ) and initialize the editor with the below code.

Starting the Editor

To initialize the editor, you have insert the following lines

1. Place this code inside the of the html page

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

2. Place this code within the form or wherever you want the textarea editor to appear.

<script>Init('mytxtarea',50,7,'This is a sample text'); </script>

‘mytxtarea’ -> is the textarea name
50 -> is the width of textarea (columns)
7 -> is the number of rows
‘This is a sample text’ -> Initial value

Frequently Asked Questions

1. How do i customize the editor with stylesheet?

It is easy to customize the images and editor with stylesheet. Just change stylesheet code in styles.css

2. Images does not appear or does not load.

There could be a problem in the path of images the editor relative to your PHP script. Just place the bbeditor folder below / assuming that php script is in /example.php and the editor is /bbeditor/images

if you want to manually change the path of images, open ed.js and you will need to change lines like this indicating the correct path of images.

document.write("<img class="button" src="bbeditor/images/bold.gif" name="btnBold" onClick="doAddTags('[b]','[/b]')">");
.....

3. How do i convert the bbcode to html?

This is a very important question.Assuming that your PHP scripts inserts the bbcode text in your mysql database, you dont need to convert the bbcode to html. All you have to do is use a bbcode parser php script to output the html corresponding to bbcode.

Download NBBC BBCode Parser (It is a fast bbcode parser converts bbcode to html)

You have to use something like this to convert bbcode to html…

<?php require_once("nbbc.php");
$bbcode = new BBCode;
echo $bbcode->Parse($_POST['mytxtarea']);
?>

Disclaimer: use of this script is at your own risk.

You can also discuss about this script in my forum. Although i cannot provide support because of my busy schedule, i would be happy to discuss in the forum.