Appendix: Creating Custom Plug-In Files for the Rich Text Editor

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

http://docs.cksource.com/

Creating Custom Buttons

To create custom buttons:

1. Create a new HTML definition and save it with the prefix PT_RTE_PLUGIN_, for example, PT_RTE_PLUGIN_MYPLUGIN.

2. 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 = '';
   

Using Images with Plug-Ins

To use images with plug-ins:

1. Add the images to the database by creating new image definitions in PeopleSoft Application Designer.

2. 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;
   

3. Send an AJAX request from the plug-in to the iScript method.

   The response is the image URL.

4. Use the image URL to display the image for the plug-in.

Adding Multilingual Support

To add multilingual support to the button:

1. Add any Message Catalog entries necessary for multilingual support.

2. 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;
   

3. Send an AJAX request from the plug-in to the iScript method.

   The response is the language-specific information.

4. Use the data as the new language information for the button.

Adding Plug-Ins to the Configuration File

To add plug-ins to the configuration file:

1. 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']
   ]; 
   

2. 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.

Specifying the Plug-In File ID Value

To specify the plug-in File ID value:

1. In PeopleSoft Application Designer, access the properties for the rich text-enabled long edit box.

2. Click the Options tab.

3. Select the name of the plug-in file from the Plugin File Id drop-down list box.

4. Save the page definition.