The HTML Area utility, used within HTML Area fields, the sign on message, custom email composition and preparing scheduled reports, has a toolbar which is set with the behavior setting named EDITOR_TOOLBAR. This has 3 settings, BASIC, STANDARD and FULL, offering 3 preset arrangements of toolbar buttons. If you require to customize the buttons to provide your own arrangement, then this custom JavaScript exit enables this capability. You must set the behavior setting EDITOR_TOOLBAR to a value of CUSTOM for this method to be called. The HTML Area utility is built using the CKEditor open source utility, and you can look at www.ckeditor.com for more information on its configuration.
Signature
customEditorToolbar()
The customEditorToolbar method must return a string value which is the composition of the toolbar you require, with the different button groups and buttons in the appropriate order.
Example
function customEditorToolbar() {
return(
[
{ name: ‘document’, items : [ ‘Source’, ‘-‘, ‘Save’, ‘NewPage’, ‘DocProps’, ‘Preview’, ‘Print’, ‘-‘ ,’Templates’ ] },
{ name: ‘tools’, items : [ ‘Maximize’, ‘ShowBlocks’, ‘-‘, ‘About’ ] },
{ name: ‘basicstyles’, items : [ ‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’, ‘Subscript’, ‘Superscript’, ‘-‘, ‘RemoveFormat’ ] },
{ name: ‘paragraph’, items : [ ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Outdent’, ‘Indent’, ‘-‘, ‘Blockquote’, ‘CreateDiv’, ‘-‘, ‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’, ‘-‘, ‘BidiLtr’, ‘BidiRtl’ ] },
{ name: ‘links’, items : [ ‘Link’, ‘Unlink’, ‘Anchor’ ] },
{ name: ‘insert’, items : [ ‘Image’, ‘Flash’, ‘Table’, ‘HorizontalRule’, ‘Smiley’, ‘SpecialChar’, ‘PageBreak’, ‘Iframe’ ] }
]);
}
The example shows the composition of a toolbar with 6 groups, each with a range of buttons. The ‘-‘ inserts a divider between buttons within a group. An ‘/’ entry inserts a new line into the toolbar.
CKEditor Plugins
If you are using the CKEditor environment to develop your own plugin which adds additional buttons to the toolbar, you need to have a statement within your UserJavaScipt.js file which identifies the names of the plugins you are adding. You add a global variable to your UserJavaScript.js file with the syntax:
evPlugins = 'myPlugin1[,myPlugin2][,myPlugin3]';
For example, if you have created a single plugin named specialLink
, the statement becomes:
evPlugins = 'specialLink';
Please review the documentation for CKEditor at ckeditor.com for information on creating plugins for the environment.