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
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
<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 if you want to add
</pre> and <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('[code]','[/code]','" + 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('[php]','[/php]','" + 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.
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.
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:
- Free Markup TextArea HTML Editor in Javascript
- Free BBCode/HTML Markup Editors!
- how to get selected textarea value using javascript
- Lightweight PHP WYSIWYG HTML Editor
- iframe innerHTML value from textarea
- Fix -> Caret/Cursor jumps to start of textarea in javascript
- Top Best Web based WYSIWYG html editors (Free)
- Free HTML Markup Editor
- PHP script to convert text string to image
- Fast loading and lightweight WYSIWYG html Editors for PHP
August 16, 2008
Great script! I’ve integrated it into my PHP/SQLite blogging script LightBlog (http://lightblog.googlecode.com/), hope you don’t mind.
August 17, 2008
hey! happy to hear that. soren121
September 1, 2008
I love this! Absolutely brilliant. Thanks so much for sharing this
Anthony.
September 26, 2008
great ! thanx a lot for sharing
September 30, 2008
at last!! thank you so much for sharing this! i hope you don’t mind me modifying this? thank you, thank you, thank you!!!
October 1, 2008
Thanks, this is the lightest weight wysiwyg I’ve seen.
October 12, 2008
Thanks
my qestion wordpress theme WYSIWYG BBCode Editor comments.php adapted ??
October 16, 2008
yes, it can be done. You have to modify within wordpress.
October 28, 2008
Thanks!!!!
November 17, 2008
The best so far:) Thank you so much:)
November 21, 2008
I added a little hack because it doesnt support multiples instances
heres te code
http://www.websysdesarrollo.com/paket_javascript.html
December 3, 2008
Works but I cannot get it to work with my php so that it could actually be used for my forum. Info does not get sent through form and there are no directions on how to display the inputed info.
December 5, 2008
what is exactly your problem? I have been used to make my admin with scaffolding and using this script to use bb code into the text area, next I save in the db the text with bb format, when you read the data (before print the data) convert to html with the nbbc.php lib. Its so easy to use
December 24, 2008
one very ANNOYING problem is that when tags are inserted at the bottom of a scrolled text area, the cursor jumps back to the top.
Any answers?
December 24, 2008
=============================
one very ANNOYING problem is that when tags are inserted at the bottom of a scrolled text area, the cursor jumps back to the top.
==============================
very annoying indeed! I fixed it now after a whole day struggle. Seems the simplest of problems are hardest to solve! It works good both in firefox and IE.
Good day
December 29, 2008
thank you, its semple
December 29, 2008
to download nbbc.php file click here
http://sourceforge.net/project/showfiles.php?group_id=235382
December 30, 2008
This is great, I managed to get it to play FLV files (JW Player) and lots of other things thanks to the NBBC BBcode parser. It’s so easy to customize, well done
January 13, 2009
Great stuff! I have one problem. When my form posts it is checking the captcha code and if it is not right, populated the form with what was already typed. If I am posted an unordered or ordered list in the body, the form doesn’t display. I assume this has something to do with the way the text is outputted in the javascript Init()
Below, the text area does not display. Should I remove all the whitespace plus returns?
Init(‘body’,50,7,’[LIST=1]
[*]estset
[/LIST]
[LIST]
[*]dsdfs
[/LIST]‘);
January 13, 2009
i think you have to escape the data.
January 13, 2009
I was able to remove returns and it worked, but doesn’t seem like a great solution. Any advice on the best way to escape the data?
January 13, 2009
Seems that when the data takes up more than one like the Javascript Init function doesnt like it.
Doesn’t display:
————-
Init(‘body’,'50′,’7′,’testing this
I hit return a couple times
And again’);
————-
If I remove returns, etc to pull the string all to one line, then I lose the formatting. I’m not sure that escaping the data will do anything. I am currently just ditching the data after submit and making them re-type instead of repopulating the textarea
January 21, 2009
Hi i cant get it to post in my database..
$kommentar = $_POST['mytxtarea'];
Init(‘mytxtarea’,50,7,’This is a sample text’);
OBS. Duo i use URLrewritten i have copyed ed.js into the same files as the Init(‘mytxtarea’,50,7,’This is a sample text’); is.
andone there have same problems as me?
January 24, 2009
UPDATE: You no longer need to struggle loading data into editor from database. With this new version of 1.2 you can directly load the data within textarea tag. It took weeks and lots of hardwork to fix this problem and at last a very simple solution did the magic.
January 26, 2009
i want to you bbcode with Arabic. but i have problem.
insert any tag but text cant add between tag.
any sulution
thanks
(sorry for english)
January 26, 2009
UPDATE: Now as of version 1.3 this editor can run multiple instances on the same web page.
January 28, 2009
thanks alot for this great piece of software, it works like a charm…
I’m using it in a few sites I’m working on and it’s really useful to me…
Keep up the very good work
January 28, 2009
sanaullah, looks like there is a problem with selected text. which browser are you using. It works very well with english and other language fonts.
February 3, 2009
It’s good but a little buggy, ended up going with this one instead:
http://oopstudios.com/dcode/index.html
February 4, 2009
I’ve found this and it works perfectly for what i need.
Is there a way i can add a closing [/*] for the bulleted lists becuase the php parser i have would make it easier to convert to html?
Many thanks for sharing this btw
February 21, 2009
Like this BBCode editor very much. Have used it to create end-use interface to add pages to website.
What I would really like is a way to call the BBCode Editor to edit one of these created pages – i.e. call the BBCode editor specifying the whole content of a previously created page… I tried this but it didn’t like me just putting the content of the page into the val parameter (multi-line input?) Any thoughts on if this is possible?
February 23, 2009
Same question: I want to use 1 toolbar for many textareas at same time. How can i do this?
February 23, 2009
That can be done. Just line up the start code edToolbar(‘mytxtarea’) next to each other, specify the different textareas inside.
March 1, 2009
If this editor is collecting data from a database (e.g. MySQL) and the data contains line breaks (when user presses enter) then when we recal it to edit the editor dosen’t show up.
Please fix.
March 1, 2009
If this editor is collecting data from a database (e.g. MySQL) and the data contains line breaks (when user presses enter) then when we recal it to edit the editor dosen’t show up.
Please fix.
===============
Answer: did you use the latest version 1.3 of the editor? those kind of bugs already fixed in that version.
Anyway i did try loading data from mysql and the editor works fine.
March 1, 2009
Oh sorry, never knew there was a new version :p
March 26, 2009
I must say that this is a great editor, fast and easy to use.
I found a problem about the links. When i add a link , it will appear in correct form, but when i go to edit, the brackets are replaced by < and > and also quotes are replaced by " , which breaks the link tags, something like <a href="http://google.com" class="bbcode_url">http://google.com</a>
March 29, 2009
thank you for sharing this code.
and I still ANNOYING problem ,if I click the url button,and cancle it, the cursor will jumps back to the top.
March 29, 2009
i) nikoj – sorry didnt get you. are using html version?
ii) charlies – are you using latest version 1.3 of this editor, which fixes jumping problem. i checked it and works fine with me in firefox.
April 7, 2009
it’s the same that I searched for
tnx much!!!
April 11, 2009
Thank you very much, that’s the code I have been searching for! Simple, clean, works great!
June 22, 2009
Awesome work! Thanks for creating this, it has been extremely useful.
July 12, 2009
Do you know what wysiwyg means?
I don’t think so…
great works, clean….but you can’t call it wysiwyg!
July 12, 2009
Thanks, changed the name to markup editor.
July 13, 2009
This is just plain awesome. Good job and thanks!
July 15, 2009
GREAT! ^^
July 31, 2009
The demo page shows some php include errors.
July 31, 2009
Thanks raoof
i fixed the problem.
August 1, 2009
a litte update
add ->
function edSmilye(obj) {
document.write(“”);
document.write(“”);
document.write(“”);
document.write(“”);
document.write(“”);
document.write(“”);
document.write(“”);
document.write(“”);
}
// you rewrite the achievement route of the smilye
and add php || html file
edToolbar(’szoveg’);
edSmilye(’szoveg’);
August 1, 2009
the html did not accept it because of code what I wrote
August 11, 2009
Cooooooooooooooool
August 31, 2009
Bugs Fixed:
* If you click cancel while inserting URL, null link is usually inserted. This is fixed.
* Tool tip to editor buttons added.
September 10, 2009
Any chance anyone can help me with executing the multiple editors on the same form?
September 25, 2009
any idea on how to implement youtube tagged content into the bbcode code base? I really need to learn this.
October 7, 2009
Very nice stuff. Iv’e been looking for something like this because I am too lazy to write it myself. No point re-invented the wheel. I take my hat off to you.
October 21, 2009
Thank you very much for this awesome script!
I am now also using it on my website!
October 22, 2009
Thanks so much for this great script!
In the demo, it would be great to have a “Copy to Clipboard” button instead of the current “Submit” button (or both buttons).
Greetings from Quebec City, Canada!
December 11, 2009
anyone can make in real time to be visible how the text gonna look like ?
i saw that there is a script for this here .. but mixing em together is kind of mess
December 11, 2009
and a button for adding just [*] without [list][*][/list]
January 19, 2010
Love it! So simple! I was attempting to make something similar, just didn’t know how to look at it. Very solid and easy to figure out how you did it. Using it in a PHPxml NewsFeed Application. Many thanks
January 23, 2010
thanks bro
January 30, 2010
how to make a drop down menu or popup box for smiles & emoticons ???
February 16, 2010
Thanks for sharing. The icons are a nice extra!