Creating Custom CKEditor Plug-ins

Important! The CKEditor v4 API differs from the CKEditor v5 API, which will become the supported version in a future PeopleTools 8.59 patch. Therefore, you are encouraged to research the differences between these APIs as soon as feasible so that you can update and test any custom plug-ins that you’ve created. In addition, the following code examples may change depending on the requirements of the v5 API.

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.