Custom toolbars on PeopleSoft Rich Text Boxes March 23, 2011
Posted by Duncan in PeopleTools 8.50, PeopleTools 8.51.trackback
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:
<ps_home>\webserv\<domain>\applications\peoplesoft\PORTAL.war\<site>\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:
Comments
Sorry comments are closed for this entry
The PeopleSoft Tipster Blog 
Thanks Duncan – very useful info.
Thanks for that. To add, I was actually searching for a command to set the toolbar initially collapsed and found it on the official site. Along with numerous other options.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbarCanCollapse
Thanks for the help.
I noticed that any HTML object having name starting with “PT_RTE_CFG_” will be available in the drop down list of the configuration settings id.
Hi,
So, is there any restriction of CKEDITOR instances in a page. Could you please let me know.
when I click on image option, it shows me erro meaage ‘ No access to this component’. Is there any permission list need to give.
By any chance would you know how to default the font to Verdana or to default font size to 10?
Very useful tip, I removed a couple of icons and it worked like a charm. Thanks a ton!
Venkat