Thursday, September 24, 2015

Working with Rich Text Editor - Custom Configuration, Toolbars and Plugins

Rich Text Editors (RTE) are being used more commonly with the latest PeopleTools versions. There are several pages that contain Rich Text Editor fields (generally for configuration) which are then used for display on other transactional pages using HTMLAREAs, used as the content for Rich Text enabled emails or used as the content for Rich Text enabled BI Publisher reports (to name a few use cases).

Note: The Rich Text Editor provided by PeopleTools is powered by CKEditor.

Page With Rich Text Editor Enabled Field:

Here is an example of a simple page that contains a Rich Text Editor field. 



The page contains a Long EditBox (CSK_RTE_DATA.DESCRLONG) with the following properties.


We are currently using the default Rich Text Options (Note: Configuration Settings Id is blank). The page appears as follows with the Rich Text Editor for the DESCRLONG Long EditBox. The Rich Text Toolbar is generated based on the default configuration.



Page Displaying Rich Text Data:

Here is an example of a simple page that displays data stored in a Rich Text enabled field using a HTMLAREA.


Page Activate PeopleCode to display the Rich Text data field in the HTMLAREA:


The page display the Rich Text data in the HTMLAREA as follows:



Adding Custom Rich Text Options - Templates, Plugins:

I recently came across an interesting question on the OTN forums. The question was "how to use Rich Text to display an iframe with a link to a youtube video?". If you look at the above Rich Text Editor field that uses the default Toolbar, it does not have the ability to add any HTML tags or specifically IFRAME content.

To enable additional/custom Toolbar items on the Rich Text Editor, we must first create our own custom Rich Text Editor Configuration.

Creating a Custom RTE Configuration:

We need to create a new HTML definition with a name that starts with 'PT_RTE_CFG'. Let us create a custom HTML definition called PT_RTE_CFG_CSK cloned from PT_RTE_CFG_PTPPB (delivered RTE Configuration).


Now to enable a custom Toolbar item for embedding an IFRAME, we must make use of additional plugins. To find the list of all available plugins as delivered, we can look in the following directory on the web server:

<PIA_HOME>/webserv/<domainname>/applications/peoplesoft/PORTAL.war/<sitename>/ckeditor/plugins

Fortunately, in this case the IFRAME plugin for CKEditor is already available as delivered (if not we must download and place the required plugins in the above folder path).


Let us now add the custom IFRAME Toolbar to our Custom RTE Configuration (PT_RTE_CFG_CSK). Let us include the following additional line in the configuration (note the comma in the screenshot).

  { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }



Moving ahead, let us reference this Custom RTE Configuration in the Page Field Properties of the Rich Text enabled field.



Now let us take a look at the page with the Rich Text enabled field.


We can see the additional/custom Toolbar that we added to our Custom RTE Configuration. This would help us with embedding an IFRAME element that links to a youtube video.




This results in an embedded IFRAME as follows:


Testing IFRAME on the Display Page:


Similarly, we can add additional custom Toolbars to our Custom RTE Configuration. Hope you find this useful!

Environment details at the time of writing this post:
HCM 9.2 PUM Image 12 (PeopleTools 8.54.08)

Reference:
PeopleBooks - Modifying the Rich Text User Interface 

13 comments:

  1. Thanks Sasank, works like a charm!

    ReplyDelete
  2. Hi Shashank.
    We have a scenario which lead us to create two webservers (for different users). Now if an image in Rich Text is upload using Web Server 1 and is then accessed using the other Webserver then it fails to fetch the image in the HTMLArea. Any solution?

    ReplyDelete
    Replies
    1. @Saurav Speaks - I have not encountered this problem.

      Appears to be a web server caching issue. You may want to raise an Oracle Support ticket and get their thoughts on it. If you already did, let us know if you got any solution!

      Delete
  3. Hi Sasank,

    We are using tools 8.55 and using rich text editor in performance documents.
    We have RTE toolbar buttons on the field using custom configuration.

    The Save button available in toolbar doesn't seem to save data but refreshes the field to its original state. Appreciate your thoughts on this. Thanks

    ReplyDelete
    Replies
    1. Hi,

      You need to capture the event and trigger appropriate code if you want the Save to do something. Rich Text Editor was not built only for PeopleSoft, so it has no way of triggering events automatically for any application for that matter.

      Also, PeopleSoft has its own Save Button. You may want to consider using that to stay within the confines of PeopleTools. Otherwise, you will need to write your own event handlers to capture the Save event and taking appropriate action.

      https://ckeditor.com/old/forums/CKEditor-3.x/Enable-save-button

      Thanks,
      Sasank

      Delete
    2. Thanks for the response Sasank. It was very helpful. Created a plugin html to override the existing 'Save' functionality and called the Save button onclick event to save the page.

      Delete
  4. Hi there - We have a scenario when the RTE is not getting enabled for one role whereas the same is getting enabled for a different role, menu. the user has access both thus ruling out security issue. Would there be any setting which would enable this through code. At the back-end the data is saved with the p tags, unfortunately same shows up online with the tags.

    ReplyDelete
    Replies
    1. Not really sure how this is working differently. But it cannot be role/security related as far as I know.

      You may want to create a SR with Oracle to figure out what is causing the differing behavior. Also, please post back here if you find the reason to this behavior.

      Delete
    2. Thanks for the pointers, in the end it was related to a special character in the label text in the text catalog. No special characters in label for RTE.

      Delete
  5. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  6. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete
  7. Thanks for this helpful Blog.
    I used a WordPress plugin that I found interesting. So I would like to recommend it.
    The plugin helps me quickly create and customize images before inserting them in my blog post.
    Check at: https://getpikiz.com/wordpress-plugin/
    It’s free.

    ReplyDelete