Modifying the Rich Text Editor User Interface

The rich text editor extends the capability of a long edit box so that, at runtime, it can display rich text as you see here:

Image: Runtime long edit box showing rich text functionality

This example illustrates the fields and controls on the Runtime long edit box showing rich text functionality. You can find definitions for the fields and controls later on this page.

Runtime long edit box showing rich text functionality

The rich text editor enables you to add rich formatting of text content, including common structural treatments such as lists; formatting treatments such as bold, underline, and italic text; drag-and-drop inclusion; paste-as-text; and sizing of images. The rich text editor toolbar is extensible through the use of HTML definitions that define your configuration, which enables you to design and implement an interface that is specific to the needs of your users.

This section discusses how to:

  • Create custom configurations.

  • Create custom templates.

  • Create custom styles.

  • Create custom plug-ins.

  • Modify the default image storage location.

Important! Use caution when modifying the rich text editor interface; it is recommended that you never include or enable the View Source button in the 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

For information on implementing security on IBM WebSphere see Securing The Administrative Console and Applications For WebSphere

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

    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 Page Field Properties for Controls.

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\plugins\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.plugins.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 Page Field Properties for Controls.

  3. Click the OK button.

  4. Save the page definition.

Note: When associated to a long edit box, all templates in an HTML definition are available to all users. To limit the available templates for specific rich text enabled long edit boxes, create a new template HTML definition to contain only the templates that you would like for the application user to see and associate that definition to the field.

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 Page Field Properties for Controls.

  3. Click the OK button.

  4. Save the page definition.

Note: When associated to a long edit box, all styles in an HTML definition are available to all users. To limit the available styles for specific rich text enabled long edit boxes, create a new style HTML definition to contain only the styles that you would like for the application user to see and associate that definition to the field.

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

See the topic “Creating Custom Plug-In Files for the Rich Text Editor.”

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.

Note: FTP storage is not supported.

Note: It often will require end users to refresh a page or access it twice in order to display an image in a rich text editor field after the following events: browser cache has been cleared, web server cache has been cleared, the posting using the rich text editor field (such as a job posting) is new.