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

Installation

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 <head> 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...

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