Using the UBB code editor plugin with the atkFckAttribute

From Achievo/ATK Wiki

Jump to: navigation, search

ATK Howto: Using the UBB code editor plugin with the atkFckAttribute

Complexity: Medium
Author: Mike Horning

List of other Howto's

This how to describes how to enable the UBB code editor plugin in the atkFckAttribute. When this is done, instead of html tags being inserted into the text as per with the normal with the Fck editor , UBB code BB square tags are inserted instead.

Contents

What is UBB code

For those of you who don't know what UBB code is here is a definition.

UBB Code is a variation on the HTML tags you may already be familiar with. Basically, it allows you to add functionality or style to your message that would normally require HTML. You can use UBB Code even if HTML is not enabled for the forum you are using. You may want to use UBB Code as opposed to HTML, even if HTML is enabled for your forum, because there is less coding required and it safer to use (incorrect coding syntax will not need lead to as many problems).

The basic UBB editor supports bold , underline , italic and hyperlink

this gets stored in the database as follows with the UBB square tags

[b]Bold text[/b] [i]italic text[/i] [u]underlined text[/u] [url=http://www.google.com]hyperlink[/url]

So what does it look like

Once you have enabled the ubb editor it looks like this

Ubb1.jpg


By pressing on the BBCode button the underlying format is visible

Ubb2.jpg

How to enable it

All of the code necessary to install the plugin already exists in the atk install you basically just need to enable the bbcode plugin located in

atk\attributes\fck\editor\plugins\bbcode.

To do this do the following

1) Point the fck install to your override plugin config

Go to the main fckconfig.js in atk\attributes\fck\fckconfig.js

set path to separate custom fckconfig setup file( my config is in /configs/ubbconfig.js)

FCKConfig.CustomConfigurationsPath = '/configs/ubbconfig.js' ;

2) Make your own custom config file -  (ubbconfig.js in this case)

Add the following lines to the config file

// Change the default plugin path.

FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + '/editor/plugins/' ;

// Add our plugin to the plugins list, also add the languages you want to support.

FCKConfig.Plugins.Add( 'bbcode' , 'en,du' );


3) Create the language directory and files according to the specification you gave in the previous step

Create the lang directory

atk\attributes\fck\editor\plugins\bbcode\lang

Add the language files

eg en.js and du.js in this case


4) Add the fck attribute to your atk node (meta node example in this case)

$ubbparms = array(null,null,array('ToolbarSet'=>'Default','Width'=>'750px','Height'=>'150px'));

$policy->add("intro", atkFckAttribute,$ubbparms);

and hopefully i didn't miss any steps !

If this fails you can refer to the experts at

http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins

There is another way that you can do this where you don't have to alter any of the config files and put all of the details in your page as you make the call as described in the above document. This would avoid losing changes on upgrade of atk.

Additional Fck Plugins

There are a few other plugins ready for use in the atk\attributes\fck\editor\plugins directory but i did not investigate them. Presumably they will follow the same install procedure.

Fckeditor wiki

Additional information can be found on the fckeditor wiki.

Personal tools
Navigation