Creating a custom toolbar in TinyMCE

27 February 2009
by Billy Czajkowska

TinyMCE out of the box includes 3 toolbars which consist of various plug-in options.
This can be very helpful in general use.  However, when conforming to a certain style according to a web site, the multiple options available can potentially be obstructive.
TinyMCE can be configured to create a new toolbar which can consist of only options you want an end user to see and use.  The custom toolbar created can be applied to specified Data Capture Template (DCT); personolising your DCT according to Web Site needs.
Browse to the folder iw-home/httpd/iw/tinymce/config
(iw-home = Location of where TeamSite installed)

Open the file custom_config.js in a text editor.  Add the following lines

IWTinyMCECustomConfig(“my_custom_toolbar”, “toolbarRow”, “bold,forecolor,|,pastetext,pasteword,|,bullist,numlist,|,undo,redo,| ,anchor,link,unlink|,table”);

In this solution I am creating a toolbar named my_custom_toolbar
I have created a toolbar which gives the end user the options;

– Bold Font, Change the Font Colour
– Paste Text without formatting, Paste text with formatting
– Bullet List, Number List
– Undo, Redo
– Inset/Edit Anchor, Insert/Edit Link, Insert a new Table

To configure this to a selected DCT field, you need to ensure the field in the datacapture.cfg comprises the following code:
<textarea required=”t” external-editor=”tinymce” external-editor-config=”my_custom_toolbar” cols=”75″ rows=”5″></textarea>
In the code above, it is saying the field must be filled in by the end user (this is optional), who will only see the my_custom_toolbar (created earlier in this blog) in the DCT for this particular field.

The screenshot below shows the custom toolbar created for the DCT:
TinyMCE Code Snippet

Our Latest News