Custom toolbars on PeopleSoft Rich Text Boxes

If you’re on Tools 8.50 or 8.51 you’re probably familiar with the new Rich-text edit boxes by now.  They allow you to amend the text with formatting, colour, links, images etc.  This is how a field looks when the default Rich Text toolbar is applied:

This is all very good when the field is in a nice empty page, where there’s plenty of space for a large toolbar.  Many pages have a lot of fields on, and the addition of a bulky toobar might make the page appear busier and more crowded.  Also, some users may get confused with the wide choice of buttons available.

I faced a similar issue today.  I needed to have the user enter some text and be able to embed links, but because of the design aesthetics of where the results would be output, I wanted to discourage the user from having lots of different colours, font sizes etc. So I wanted to reduce the toolbar so it had just two buttons – add link and remove link.

It turns out that there’s a pretty simple way of customising the toolbar. 

Against the Page Field properties of the Long Edit box there is an Options tab (you probably used it to make the field Rich Text).  The first drop-down allows you to select alternate configurations (they’re all HTML Objects).  There isn’t a delivered one that did what I wanted, so I took an existing one and modified it.

I opened an existing one (‘PT_RTE_CFG_PTPPB’) and took a look at the contents:

FCKEditor configuration file for Pagelet Wizard HTML Data Source
-->
CKEDITOR.config.skin='office2003';
CKEDITOR.config.toolbar =
[
['Source','-','Maximize','Preview','Print','-','Cut','Copy','Paste','-','Undo','Redo','-','Find','Replace','-','HorizontalRule','Table','imageUPLOAD','Link','Unlink','SpecialChar'],
['Format','Font','FontSize','-','Bold','Italic','Underline','Strike'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList','Outdent','Indent','-','TextColor','BGColor']
];

It’s pretty clear to see that each toolbar button is represented by an entry in the CKEDITOR.config.toolbar section. I cloned the delivered one and reduced the toolbar section down to:
CKEDITOR.config.toolbar =
[
['Link','Unlink']
];

This had the desired effect of reducing the toolbar to exactly what I needed, but it had introduced an unwanted bottom section which shows the HTML tags for the edit box.

There was nothing in the config file that I’d specified that had introduced this, so where had it come from?

It turns out that when you specify a config file, it overwrites the default values.  After a good deal of searching I located them in:

\webserv\\applications\peoplesoft\PORTAL.war\\ckeditor\config.js

Not only does it specify the defaults for the toolbar, but it also contains the lines:

config.resize_enabled = false;
config.removePlugins = ‘elementspath’;

Once I’d added these two lines to my config HTML object my rich text box displayed exactly as required – a much simpler and more compact edit box containing just the toolbar buttons that I want:

Be the first to like this post.