Plug-ins enable you to add custom buttons to the rich text editor toolbar.
This chapter discusses how to:
Create custom buttons.
Use images with plug-ins.
Add multilingual support.
Add plug-ins to the configuration file.
Specify the Plug-In File ID value.
See Also
To create custom buttons:
Create a new HTML definition and save it with the prefix PT_RTE_PLUGIN_, for example, PT_RTE_PLUGIN_MYPLUGIN.
Use JavaScript to code the functionality of the button in the HTML definition. This is sample code for a button that will create a new page:
CKEDITOR.plugins.add( 'TestPlugin', { init : function( editor ) { editor.addCommand( 'Oracle_New_Page', { modes : { wysiwyg:1, source:1 }, exec : function( editor ) { editor.setData( editor.config.newpage_html ); editor.focus(); } }); var iconpath= CKEDITOR.getUrl('skins/' + editor.config.skin + '/icons.png' ); editor.ui.addButton( 'TestPlugin', { label : ‘'Oracle_New_Page'’, command : ''Oracle_New_Page'', icon: iconpath, iconOffset : 38 }); } }); CKEDITOR.config.newpage_html = '';
To use images with plug-ins:
Add the images to the database by creating new image definitions in PeopleSoft Application Designer.
Create an iScript method to download the images you need for the plug-in, for example:
Function IScript_ GetImages &ImageURL = %Response.GetImageURL(Image.XYZ); %Response.Write(&ImageURL); End-Function;
Send an AJAX request from the plug-in to the iScript method.
The response is the image URL.
Use the image URL to display the image for the plug-in.
To add multilingual support to the button:
Add any Message Catalog entries necessary for multilingual support.
Create an iScript method to get the language-specific information from the Message Catalog. This is an example:
Function IScript_ GetData %Response.Write (MsgGetText(1234, 1, "Message not found."); End-Function;
Send an AJAX request from the plug-in to the iScript method.
The response is the language-specific information.
Use the data as the new language information for the button.
To add plug-ins to the configuration file:
Add the new toolbar button to the toolbar set in the configuration file.
This is an example of the code for the new Oracle_New_Page button:
CKEDITOR.config.toolbar = [ ['Preview','Print','-','Cut','Copy','Paste','-','Undo','Redo','-⇒ ','Find','Replace', 'Oracle_New_Page'] ];
Add the plug-in that hosts the new button.
This is an example of the code:
CKEDITOR.plugins.addExternal( ''Oracle_New_Page'', CKEDITOR.config.PluginPath ); CKEDITOR.config.plugins += ', 'Oracle_New_Page''; CKEDITOR.config.toolbar = [ ['Preview','Print','-','Cut','Copy','Paste','-','Undo','Redo','-⇒ ','Find','Replace', 'Oracle_New_Page'] ];
If you are displaying the rich text editor in a limited space, you must group the editor controls using brackets [ ], as you see in this example:
config.toolbar = [ ['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'] ];
If you do not group the editor controls in this way, the application will not render the editor correctly.
To specify the plug-in File ID value:
In PeopleSoft Application Designer, access the properties for the rich text-enabled long edit box.
Click the Options tab.
Select the name of the plug-in file from the Plugin File Id drop-down list box.
Save the page definition.