Plan Zero Blog » Code Projects http://blog.planzero.org Mind dump Sat, 05 Sep 2009 17:29:18 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 BBEditor, the free BBCode editor http://blog.planzero.org/2008/12/bbeditor-the-free-bbcode-editor/ http://blog.planzero.org/2008/12/bbeditor-the-free-bbcode-editor/#comments Thu, 18 Dec 2008 13:23:41 +0000 Plan Zero http://blog.planzero.org/?p=45 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.

BBEditor edit bar

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…
]]> 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.

BBEditor edit bar

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.

  1. Download and extract BBEditor
  2. 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>
  3. 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.

]]> http://blog.planzero.org/2008/12/bbeditor-the-free-bbcode-editor/feed/ 21