Modifying the Rich Text Editor User Interface

Securing CKEditor Files

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.

Creating Custom Configurations

CKEditor v5 does not provide a default configuration file. If you want to create a custom configuration file, you may copy the PeopleTools delivered configuration file for CKEditor v5.

To create a custom configuration:

1. In Application Designer, search for the PeopleTools delivered configuration file (PT_RTE_CFG), and copy the code in the configuration file.

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

   const cketoolbarconfig =  [
               'heading',
               'findAndReplace',
               'italic',
               '|',
               'link',
               'numberedList',
               '|',
               'indent',
               'outdent',
               'alignment:left',
               'alignment:right',
               'alignment:center',
               'alignment:justify',
               '|',
               'InsertImage',
               'blockQuote',
               'insertTable',
               'undo',
               'redo',
               'SpecialCharacters',
               'fontSize',
               'fontFamily',
               'fontColor',
               'fontBackgroundColor'
           ];

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

   See Setting Options Properties.

Creating Custom Plug-In Files

A plug-in enables you to create an application-specific toolbar button.

See CKEditor v5 API Documentation.

Modifying the Default Image Storage Location

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.

Securing CKEditor Files

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

Creating Custom Configurations

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:

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

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

   See Setting Options Properties.

Creating Custom Template Files

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.

Creating Custom Style Files

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.

Creating Custom Plug-In Files

A plug-in enables you to create an application-specific toolbar button.

See CKEditor v4 API Documentation.

Modifying the Default Image Storage Location

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.