Extending the Rich Text Editor Widget of the SAP Cloud Platform Portal

[Former Member]

Note that "SAP HANA Cloud Platform, Portal Service" is rebranded to SAP Cloud Platform Portal starting in March 2017.

--------------------------------------------------------------------------------------------------------

Welcome back SAP Cloud Platform Portal advocates!

 

I want to share our new extendable accelerator with you, as an addition to the articleAccelerate your SAP HANA Cloud Platform, portal service Implementation

The SAP HANA Cloud Platform, portal service is shipped with an out-of-the-box widget called Rich Text Editor, an editor for adding and formatting text, tables and more.

The editor is based on the third party open source component TinyMCE, a web-based WYSIWYG editor that can be customized extensively. Because of this, the Rich Text Editor widget can also be extended and customized to make use of the advanced features available in TinyMCE. In fact, another out-of-the-box widget of the portal service, the List Builder, is an extension of the Rich Text Editor widget: it has different menus, additional plugins, and makes use of the TinyMCE support of HTML templates.

 

To fully utilize the power of this widget, you should familiarize yourself with TinyMCE, especially with the concepts of plugins and templates.

Without understanding these concepts, you won't be able to extend the widget to your liking.

 

This blog post is a guide that shows you how to extend the Rich Text Editor widget and deploy it to your account, to be used as a new widget in your portal service sites.

 

1. Import the Sample Rich Text Editor Extension Widget
   
   
   
   1. Navigate to Releases · SAP/hcp-portal-service-samples · GitHub
   
   
   2. Download the rteextension.zip file and import it to SAP Web IDE.
   
   
   
   


2. Customize the Extension Widget
   You can customize the widget in the following ways:
   
   
   
   1. manifest.json: Customize the settings file of the widget.
      Under sap.cloud.portal/settings you can find all the settings that are relevant to TinyMCE:
      
      
      
      • “plugins”: A list of TinyMCE-made plugins that are loaded in the editor.
      
      
      • “portalplugins”: A list of portal service plugins that are loaded in the editor.
      
      
      • “customplugins”: A list of the custom plugins that are loaded in the editor. Any plugins that you develop should be added to this list.
      
      
      • “menu”, “toolbar”, “templates”, etc.: other configurations that are available in TinyMCE. You can add any editor configuration that is supported by TinyMCE to the settings section of the manifest file.
      
      
      
      
   
   
   2. controller/Main.controller.js: Change the method getDefaultContent() to set the initial content that will be populated in the widget when the admin adds it to a page.
   
   
   3. css/style.css: Add custom CSS styles to this file.
   
   
   
   


3. Add Plugins
   You can create your own custom TinyMCE plugins and load them in the editor of your widget. Add your plugins to the plugins folder and add their names to the customplugins setting in the manifest.json file. As an example, a sample plugin (which does absolutely nothing) is provided as part of the sample extension widget.


4. Add Templates
   TinyMCE supports custom HTML templates. You can create your own HTML templates and use them in your extended widget. Place your HTML files in the templates folder and add their title and URL to the templates setting in the manifest.json file. A sample template is provided as part of the sample widget extension. For example, the List Builder widget, delivered "out-of-the-box", was created by extending the Rich Text Editor widget, where each type of list item is a different type of HTML template.
   
   Thetemplateutils plugin is provided by the portal service as part of the basic Rich Text Editor widget. This plugin adds the actions cutitem, copyitem, pasteitem and deleteitem to the available menu items. These actions relate to template items. For example, if the template is a list item, the cutitem command cuts the entire list item.
   That way, admins can use these actions to cut, copy, paste and delete complex template items instead of using the standard editing actions (the regular "cut" menu option, activated by the Ctrl+X keyboard shortcut), ensuring that the action applies to the entire template item. If the standard editing actions are used, they may apply only to the template content (text, an image) and not "catch" the entire template item.
   
   Note that the sample extension widget's HTML file consists of a <table> tag with the classmce-template. While it is not mandatory to use this structure in your templates, it is required for the templateutils actions to work.
   
   Read more about templates in the TinyMCE documentation.
   
   


5. Deploy your new Rich Text Editor Extension Widget
   Deploy your application to the SAP HANA Cloud Platform and your new widget will be available to admins in the portal service Site Designer.

 

Read more about Portal Service accelerators in the article Accelerate your SAP HANA Cloud Platform, portal service Implementation