BBEditor, the free BBCode editor
Well, I said that I’d be using this blog to publish code, so here’s my latest little project.
BBEditor is a free BBCode editor written in JavaScript for HTML/PHP. It’s standards compliant, and really is rather sexy.
Features:
- Easy to integrate
- Cross-browser compliant
- Degrades wonderfully in old or non-compliant browsers
- Sleek code – fast loading, no bulk, no mess
- Easy to style to your needs
- Adding additional buttons and functionality is a sinch!
Got you curious? Try the basic demonstration that comes with BBEditor!
Download
Current version: BBEditor v0.1
Integration
You’ll like this.
- Download and extract BBEditor
- Add the following two lines to the <head> section of your page:
<link href="bbeditor.css" rel="stylesheet" type="text/css" /> <script src="bbeditor.js" type="text/javascript"></script>
- Add class=”bbeditor” to any <textarea> that uses BBCode
Yup, that’s all there is to it. Simple.
Customisation
Customising BBEditor is fairly easy. To edit the styles associated with the BBEditor bar, you can edit bbeditor.css. The main bar uses a class named bbebar. To keep things simple, you may want to add the contents of bbeditor.css to your main style sheet. This will also cut down on browser traffic.
To add your own buttons and functionality to BBEditor, you’ll have to have a little JavaScript knowhow. You’ll find that bbeditor.js has a compressed chunk of code at the top; skip this and go to the bottom of the file. This is where the fun stuff is.
The buttons are defined in a Hash, so to make changes locate and alter the following code (this should be fairly self explanatory, so I won’t go into detail):
// Buttons definitions! bbeButtons=new Hash({ bold: new Hash({ title: 'Embolden Text', icon: bbeSettings.get('imageBase') + 'text_bold.png' }), italic: new Hash({ title: 'Italicise Text', icon: bbeSettings.get('imageBase') + 'text_italic.png' }), ... });
The function to be performed is defined by the target link associated with each button. This is defined in the bbeButtons hash, so in the above code, italic and bold are the link targets. To add new functionality, add the relevant link target to the switch() statement in the bbeAction() function:
// Perform an action, determined by the href of the followed link function bbeAction(el, et) { ... switch(action) { case '#bold': et.insertAroundCursor({'before': '[b]', 'after': '[/b]'}); break; case '#italic': et.insertAroundCursor({'before': '[i]', 'after': '[/i]'}); break; ... } }
FAQ
Why did you write BBEditor when there are other similar tools?
When I was looking for a simple BBCode editor, I found so much messy code that I got fed up and decided to take the time to write my own. Many of the existing editors wouldn’t create a text input box at all if JavaScript was disabled, or were slow and clunky to use. BBEditor is light, and degrades well. If a user doesn’t have JavaScript, the input box is still usable without the editing bar.
My images aren’t loading! Help!
If you have moved the location of the script or the images, the images may not load. Don’t panic! You can set the base location for the images in bbeditor.js. Just update the imageBase setting in the following block of code:
// General settings bbeSettings=new Hash({ position: 'before', imageBase: 'icons/' });
Where did you get those great icons, anyway?
I have used the fantastic free Silk icon set. If you want to add some buttons, I couldn’t recommend this set of icons enough.
What technology does BBEditor use?
BBEditor uses DOM-compliant JavaScript. For compatibility and efficiency reasons I have used code from the mootools library complimented by the Clientcide extension for accessing forms. This is all included in bbeditor.js.
How much does this all cost?
Nothing! This is free, open source software, released under the MIT License.
Hey, awesome script! I’m trying to implement in on my website but I’m having some issues. my website is set up so that 99% of the pages have index.php in the url(index.php?page=login). im trying to add your script on two of the pages, one for adding comments and the other for the CMS to add a news post. ive added the script to the main index.php and added the class to my two textareas. It displays just fine but does nothing when clicked. I’ve tried putting the bbeditor.js file in many differnt places and just cant get it to work. any help would be great because i suck at javascript :)
Hey Charlie. Glad you like the script :-) Are you using the script tag to include bbeditor.js as above? Does the demo form on this page work in your browser as expected? I’d be happy to take a look at the site if it’s live; got a URL I could look at?
yes im using the script tag to include the javascript file in index.php. i then include the form from a different file based on the ‘page=’ var in the URL. the demo works fine and also works fine on my localhost. i believe the problem has something to do with the textarea being on a file that isn’t index.php. ive tried placing my form file inside of “bbeditor/” but it didnt work. i’ve also tried placing all required files in my root instead of “bbeditor/” and trying it that way but still no good. im loosing my patience with this. i don’t have a URL because i want to get this right before i make it live.
You guys at MIT have all the best stuff.
Hey Charlie. Without being able to take a look at the page itself there’s not much I can suggest. If you find the solution, please share it… I’d love to know what the problem is!
This script very good! I say thank you for it.
Noooo why did this have to be mootools based :( Nice job, nonetheless. Just wish I could use it lol
@Jared, why can’t you use mootools? Only a tiny piece of the toolkit is included, and it makes BBEditor much more portable. To be honest, you could probably rewrite the couple of mootools functions which I’ve used without too much trouble if you’re really stuck!
Yep that’s what I ended up doing! This is a great piece of code. Great lightweight code for my lightweight forum.
This script very good! I say thank you for it. but i use mootools before. js file is too big. how can we use this script with mootools 1.2?
thank you.
Hi, I was trying to use your bbeditor and all seems to load, but none of the buttons doesn’t seem to work. I know that the .js and .css is loading properly because i have edited and reloaded to see the differences and it changes.
What am I doing wrong?
The website I am working on is provided as link to this post.
woops, well I should have mention that the page i am working on is the discussion boards (pop out menu from “Resources”).
Never mind, you really should mention that the textarea must contain the id=”content_1″ for it to load dom properly.
@Rob The <textarea> doesn’t require the id “content_1″, it just requires an id. Since all form elements should have an ID anyway, I didn’t think to mention it. Forms should generally use the <label> element to label fields so that the form is more accessible to people with disabilities (and it also has the nice effect of making checkboxes checkable by clicking their label). For more info, see http://www.w3schools.com/tags/tag_label.asp and http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels
So how do i get the output to work properly? I mean it re prints as [ b]bold text[/ b] instead of the word(s) actually being bold.
I have a question. Your script doesn’t seem to work with nicely with JQuery. If I load your script first, JQuery doesn’t want to work, If i load your script last, JQuery works, but then bbeditor light doesn’t work anymore. Whats the deal with that?
@DanX I’ve done a quick search and it seems that some of the JQuery functions are named identically to the mootools functions. You could probably get away with doing a quick search-and-replace in the code. Good luck!
@Rob BBEditor is a BBCode editor not a parser, and is designed to be platform agnostic. I have written a compact PHP parser, but it’s not quite in a state to publish yet. Do a quick search around and you’re bound to find many nice pieces of code which’ll handle the server side end of things for you!
moral aspects of student on drugs Order nizoral sleeping bag for toddlers free dental care in ky youthful heart
http://rxdrugs24×7.com/product/buspar.html
we had a problem with german special chars (ö,ä,ü,…)
tpye in textarea: “Hallöchen”
after using button quote: [quote]Hallö[/quote]chen
any ideas?
Just to let you know your site looks a little bit weird in Safari on my laptop with Ubuntu .