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
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
Free Skins
I have made few skins for this editor. To install the skin, just overwrite the styles.css inside editor folder.
Blue skin
Brown Skin
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.
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
[sourcecode language=”html”]
<script type="text/javascript" src="bbeditor/ed.js"></script>
[/sourcecode]
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
[sourcecode language=”html”]
….
<script>edToolbar(‘mytxtarea’); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed"></textarea>
…..
[/sourcecode]
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…
[sourcecode language=”html”]
<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>
[/sourcecode]
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.
[sourcecode language=”javascript”]
document.write("<img class=\"button\" src=\"bbeditor/images/bold.gif\" name=\"btnBold\" onClick=\"doAddTags(‘[b]’,'[/b]’)\">");
…..
[/sourcecode]
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…
[sourcecode language=”php”]
<?php require_once("nbbc.php");
$bbcode = new BBCode;
echo $bbcode->Parse($_POST[‘mytxtarea’]);
?>
[/sourcecode]
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.
[sourcecode language=”html”]
<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>
[/sourcecode]
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
[php]
document.write("<img class=\"button\" src=\"bbeditor/images/code.gif\" name=\"btnCode\" onClick=\"doAddTags(‘
[code]’,'[/code]
‘,’" + obj + "’)\">");
[/php]
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.
[php]
document.write("<img class=\"button\" src=\"bbeditor/images/phpcode.gif\" name=\"btnPHPCode\" onClick=\"doAddTags(‘
[sql]’,'[/sql]
‘,’" + obj + "’)\">");
[/php]
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!
