Modifying the Rich Text Editor User Interface

PeopleTools 8.60 currently supports CKEditor v4, which includes many features that are not supported in CKEditor v5. When CKEditor v5 support is added in a future PeopleTools 8.60 patch, you will no longer be able to use the CKEditor v4 features listed in the following table. Therefore, Oracle recommends that you evaluate your usage of each of these features now to begin the process of phasing them out before CKEditor v5 is delivered in a future PeopleTools 8.60 patch.

The following CKEditor features will be deprecated in a future PeopleTools 8.60 patch. Features identified as plug-ins are rendered as button in the rich text editor toolbar.

By default, CKEditor files can be accessed without authentication on the web server. Oracle recommends that after your PeopleSoft Internet Architecture installation, you make sure to secure any files or folders at the web server level as needed. To secure CKEditor files, security has to be setup at web server level. How you configure this security varies according to your web server product.

For information on implementing security on Oracle WebLogic see Securing Servlets on WebLogic

The default configuration filename is config.js. You can locate this file in the PIA_HOME\webserv\domainname\applications\peoplesoft\PORTAL.war\sitename\ckeditor directory.

To create a custom configuration:

1. Copy the code in the config.js file.

2. Open Application Designer and create a new HTML definition.

3. Paste the code into the HTML definition.

4. Save the HTML definition. Prefix the definition name with PT_RTE_CFG for example, PT_RTE_CFG_MYCONFIG.

   Note: Only HTML definitions with the PT_RTE_CFG prefix appear in the Configuration Settings Id drop-down list box.

5. Modify the code in the HTML definition as necessary and save. The code might look like this example:

   Important! The CKEditor v4 API differs from the CKEditor v5 API, which will become the supported version in a future PeopleTools 8.60 patch. Therefore, the following code examples may change depending on the requirements of the v5 API.

   CKEDITOR.editorConfig = function( config )
   {
   	config.toolbar =
   [
   	['Templates','Styles','Cut','Copy','Paste','Bold','Italic','Underline','Strike'],
   
   ];
   };
   

   In this example, the Cut, Copy, Paste, Bold, Italics, Underline, and Strike buttons and the newly created custom templates and the styles appear in the toolbar at runtime.

6. To use the new configuration, open the Long Edit Box Page Field Properties dialog box; select the Options tab; click the Configuration Settings Iddrop-down list box; and then select the HTML definition name from the list of values that appear.

   See Setting Options Properties.

The rich text editor delivers templates that help you format the text in predetermined ways. The default template file is default.js. You can locate this file in the PS_HOME\webserv\domainname\applications\peoplesoft\PORTAL.war\sitename\ckeditor\plug-ins\templates\templates folder.

To create a custom template file:

1. In Application Designer, create an HTML definition and save it as PT_RTE_TMPL_TEMPLATE. The definition name should always be prefixed with PT_RTE_TMPL,_ and the HTML must include 'pt_rte_template' as you see in this example:

   CKEDITOR.addTemplates('pt_rte_template',{imagesPath:CKEDITOR.getUrl(CKEDITOR.plug-ins.getPath('templates')+'templates/images/'),templates:[{title:'Image and Title',image:'template1.gif',description:'One main image with a title and text, which surrounds the image.',html:'
   <h3><img style="margin-right: 10px" height="100" alt="" width="100" align="left"/>Type the title here</h3>
   <p>Type the text here</p>'}]});

   Note: The name 'pt_rte_template' is the fixed name, which has to be set for any custom template that you create. The template name should be exactly the same as mentioned above.

   Save the HTML definition.

   Note: It is recommended that if you create a custom template file, that you create a custom configuration file for it to reference.

2. To use the new configuration, open the Long Edit Box Page Field Properties dialog box; select the Options tab; click the Template File Iddrop-down list box; and then select the HTML definition name from the list of values that appear.

   See Setting Options Properties.

3. Click the OK button.

4. Save the page definition.

The rich text editor delivers styles to assist you in entering data using specific styles that combine color, font and format. The default configuration file is default.js and is in the PIA_HOME/webserv/.../styles folder.

To create a custom style file

1. In Application Designer, create an HTML definition and save it as PT_RTE_STYLE_MYSTYLE.

   The HTML Object name used for defining styles should always be prefixed by PT_RTE_STYLE.

   This is sample code for an HTML style definition:

   CKEDITOR.stylesSet.add( 'pt_rte_style',[{name:'Blue
   Title',element:'h3',styles:{color:'Blue'}}]);

   Note: In this style example, the name 'pt_rte_style' is the fixed name, which has to be set for any custom style that you create. The style name should be exactly the same as mentioned above.

2. To use the new configuration, open the Long Edit Box Page Field Properties dialog box; select the Options tab; click the Style File Iddrop-down list box; and then select the HTML definition name from the list of values that appear.

   See Setting Options Properties.

3. Click the OK button.

4. Save the page definition.

A plug-in enables you to create an application-specific toolbar button. See CKEditor v5 API Documentation.

By default, when you upload images the system stores them in the PTRTDB table. The default URL ID is PT_RTE_IMG_DB_LOC. To create a different storage location and URL ID, follow these steps:

1. Create a new record definition.

2. Insert the FILE_ATTDET_SBR subrecord.

3. Save and then build the record definition.

4. Clone these record definitions:

   • PTRTDB_BMP

   • PTRTDB_GIF

   • PTRTDB_JPG

5. Save the record definitions, name them like this: <myrecord>_BMP, <myrecord>_GIF, and <myrecord>_JPG.

6. For each record, open the SQL Editor and change the FROM statement in the SQL to this:

   FROM PS_<your record name from step 3>

7. Save and build each view.