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 appendix discusses how to:

• Create custom buttons.

• Use images with plug-ins.

• Add multilingual support.

• Add the plug-in to the configuration file.

• Specify the Plugin File Id value.

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 an 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 Application Designer.

2. Create an iScript method to download the images you need for the plug-in. This is an example:

   Function IScript_ GetImages
      &ImageURL = %Response.GetImageURL(Image.XYZ);
      %Response.Write(&ImageURL);
   End-Function;
   

3. Send an AJAX request from the plugin 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 plugin 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 where the new button is Oracle_New_Page:

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

Specifying the Plugin File ID Value

To specify the plugin File Id value:

1. In 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.