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.
Solution:
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:
