Free Markup BBCode Editor in Javascript

A simple homemade and lightweight free to use textarea bbcode markup editor written in javascript. Although not complex it has all the basic bbcode functions like hyperlink, quote and code, list tags. This editor can be used in forums, content management systems (CMS), blog applications and in many other php scripts.

– Fast loading and lightweight
– Works in IE and Firefox
– No popup html window for inserting hyperlinks.
– Easy to integrate
– Works on all major browsers

bbedimg.PNG

You can use it 100% FREE or do whatever you want with this script. This is the one of the best project i had ever done and it feels great! Please spread word about my work by any means possible.

Note: If you want the same editor to insert html markup codes, you can use html editor version

Demo

Download (5kb)

Free Skins

I have made few skins for this editor. To install the skin, just overwrite the styles.css inside editor folder.

Blue skin

blueskin.PNG

Download

Brown Skin

brownskin.PNG

Download

If you need more colors, leave me a comment!

Free Icons

If you get bored with default icons, you can always use below icon images which i have made for my html editor.

bold.gif italic.gif underline.gif ordered.gif unordered.gif link.gif image.gif quote.gif code.gif

For more customizations, 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 head tags of the html page

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

2. Place this 2 lines of code within the form or wherever you want the textarea editor to appear. The name and id of textarea can be any name you prefer but dont change the class.

You should also specify class=”ed” inside textarea tag. This style is coded in styles.css

....
<script>edToolbar('mytxtarea'); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed"></textarea>
.....

Note: Make sure that the id value and the value inside of edToolbar() is same.

If you want multiple instance of editor to be running on same page, use it like this…

<form name="form1" method="post" action="">
  <p>
    <script>edToolbar('mytxtarea'); </script>
    <textarea name="mytxtarea" id="mytxtarea" class="ed">sample text</textarea>
  </p>
    <p>
    <script>edToolbar('mytxtarea2'); </script>
    <textarea name="mytxtarea2" id="mytxtarea2" class="ed"> sample text</textarea>
  </p>
    <p>
    <script>edToolbar('mytxtarea3'); </script>
    <textarea name="mytxtarea3" id="mytxtarea3" class="ed">sample text</textarea>
  </p>

  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

The default height and width of text area is specified in styles.css. It is 400px width and 150 height. You can open styles.css and modify the width and height of text area.

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']);
?>

4. How do i load the data stored in database to the bbcode editor for editing?

This is a very important question. Suppose you have inserted the content with bbcodes to the database but what if you want to make changes to the content. You might want to pull the content from database and load it in editor to make editing and changes to it. In that case you will need to output the javascript initialization with php. In this way you will load the content when the editor starts.

<form name="form1" method="post" action="">

  <p>
<script>edToolbar('mytxtarea'); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed">PHP CODE HERE</textarea>

  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

5. How do i add custom tags with this editor?

It is very easy to just tweak a few lines of code to insert new tags to your own editor. For example lets say you want to add pre tag to the editor…follow these steps

1. Open and edit bbeditor/editor.js file
2. Look for this line


document.write("<img class=\"button\" src=\"bbeditor/images/code.gif\" name=\"btnCode\" onClick=\"doAddTags('



','" + obj + "')\">");

and below add this line with php tags. Just replace code to php tag. Thats all.
Note: Make sure you have made a custom image icon phpcode.gif for this tag. It should be 22×22 pixel size.

document.write("<img class=\"button\" src=\"bbeditor/images/phpcode.gif\" name=\"btnPHPCode\" onClick=\"doAddTags('



','" + obj + "')\">");

6. Where can i find more icon sets to use with this editor?

Note that because of copyright issues, i havent used the icon sets created by others in this editor. That is why i created my own editor icons (may not the best but good to go). I have seen many many open source icons and you can find them this page.

7.  How do i add this editor to wordress comments form?

Glad you asked! It can be done easily. see this page

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

8. Is there any license to remove copyright on this script?

yes, you can remove the copyright in this script to use this editor in your projects. There is a one time $30 fee copyright removal fee. You can use this payment link.

This grants you unlimited license including removing copyright and use this script in your commercial projects.

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.

Update:

1. As per many request of users, a new functionality of inserting ordered and unordered lists been added to this editor.

2. Many users have reported jumping of cursor to first line when inserting codes. That also been fixed!

3. Many people reported that they had problems in loading data into the editor. As of v1.2 you no longer need to struggle escaping data just directly load the data within textarea tags. It took me weeks to fix this problem and at last a very simple solution to editor initialization did the magic.

4. Now this editor runs as multiple instance on same page.

Enjoy!

 

Similar Posts:

Tags:

Balakrishnan Prabhu

Mr. Balakrishnan Prabhu is the founder of Corpocrat magazine. He is also the founder of Best Citizenships (BC), assisting wealthy individuals with Global citizenship solutions. His other interests are Linux, Machine learning, Wordpress, etc. You can contact him here

  • http://www.indonesiapagi.com/ Andy

    awesome, I have install and it works for me!
    its damn cool.. :)

  • http://www.ysapak.com Uzma

    hi great..

  • Irwan

    Hi.. i love this article, im on making standar forum now.
    its ugly forum because im trying it from 0.
    i try use this bbcode editor, its seem good but when i try using quote & code its only like

    Quote:
    zxxxx

    Code:

    its not like other forum that quote & code has own box like that. could you help me please how to modify it??