Working With Rich Text Editor Fields

The rich text editor extends the capability of a long edit box. It allows for the rich formatting of text content, including common structural treatments such as lists, formatting treatments such as bold and italic text, and drag-and-drop inclusion and image sizing. You use the rich text editor toolbar to apply additional formatting elements. The toolbar is extensible by means of a custom settings configuration file that application developers can create and implement. See Modifying the Rich Text Editor User Interface.

The rich text editor provides an easy to use interface which should be familiar to users who work with common text editors such as Microsoft Word or Oracle Open Office. It consists of these distinct elements:

• Toolbar

• Editing area

The Messages scroll area contains an example of the rich text editor control showing the toolbar and editing area elements:

This example shows the rich text editor controls.

Toolbar

The toolbar, which is the area at the top of the editor, contains many different buttons that extend and activate a variety of editor functions. The toolbar is highly personalizable and can vary from field to field.

See CKEditor v4 Features Desupported in CKEditor v5.

Editing Area

The editing area is directly below the toolbar. You enter text in this area.

Limitations

Note the following limitations for using the rich text editor:

• The PeopleTools SVG Administrator role is required to be able to upload SVG images via the rich text editor.

• When the Source button is enabled, <script> tags are not allowed in rich text editor content. If you include a <script> tag, then the entire content will be converted to text, including all HTML tags.

• When the Source button is enabled, you cannot include <link> tags—for example, to reference style sheets.

The toolbar is the area in rich text editor where you can activate most of the editor features. Each button in the toolbar accesses a different function. Available functions are both simple, such as basic text formatting, and advanced, such as creating links and tables.

To use the buttons in the toolbar, place your cursor over the button. The button highlights and hover text with information about the function of the button appears. Click the button to initiate its function. The graphics on the toolbar buttons are standard across many text editors, and you will probably find that you know how to use them intuitively. In addition to the toolbar buttons, toolbar drop-down list boxes are also available; they are white areas with an arrow on the side. You activate drop-down list boxes by clicking the white area or the arrow. After you click a menu, it expands so that you can select from the available options. To select an option, move your cursor to it and click it.

Writing in the rich text editor is similar to writing in desktop word processor text editors such as Microsoft Word or Open Office with one important difference. You use desktop word processors primarily to create printed content, limited by physical pages. You use the rich text editor to create text that you publish on PeopleSoft application pages and read using web browsers.

To enter text, move your cursor to the editing area and enter the data using your keyboard. You can also paste text into the area.

To format text, click the button before you begin entering text or highlight text and click the button for the format that you want.

To insert an image into the text, click the Image button. The maximum image size is database dependent. Some database platforms support large image sizes while others limit the size to 32000 bytes. Consult your database documentation for more information. Use the Image Upload dialog box to upload an image file.

Uploading an Image

Access the Image Upload dialog box (click the Image button).

The following image types are supported: JPG, BMP, GIF, PNG, and SVG.

This example illustrates the fields and controls on the Image Upload dialog box.

When you select the Upload button, the File Attachment dialog box appears.

Select the Browse button to locate the file that you want to insert into the text.

Select the Upload button to send the image to the database.

On successful completion of the upload process, the Image Src Url field is automatically populated with the URL ID for the image.

Modifying an Image

After inserting an image, you can modify the placement and size of the image and enter alternative text. Select the image to display the editing options.

Note: After upgrading to CKEditor v5, images that were uploaded through CKEditor v4 may display alignment and formatting issues. Therefore, after upgrading to CKEditor v5, you should reformat and readjust the images using CKEditor v5.

You can select the Spell Check button that is outside of the rich text editor field to perform spell check on the field content. Selecting this button invokes the current PeopleTools spell check functionality.

The HTML tags are stripped and only the text is considered for spell check.