Creating Custom CKEditor Plug-ins

Plug-ins enable you to add custom buttons to the rich text editor toolbar.

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 : 0
   });
   }
   });
   

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.

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.

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.

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.