Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

The Rich Text Editor UI Element offers a way of configuring the set of buttons that will be shown when using the editor in an application.

There are applications like the Interaction Center E-mail view, which use this possibility to configure a set of buttons when using the IC E-mail.

However, you might want to modify this pre-defined set of buttons and consider your own. And here is how you do it:

 

The UI Element for Rich Text Editor based on TinyMCE can receive as input an internal table with the list of buttons and their positions on the toolbar.

 

 

The toolbar table expects the following structure:

 

 

 

From the code in the previous image:

1)      Table GT_BTF_EDITOR_TOOLBAR is to be the input of the Rich Text Editor UI Element and it is of type WCFT_RTE_TOOLBAR.

2)      Each entry for this table has a structure definition of type WCFS_RTE_TOOLBAR and can support four components:

  1. ELEMENT:  Is the identifier of the button.  This is the ID of the buttons, and it is based on the set of buttons provided by the old BTF Editor.
    There is a list of values provided by the UI Element that can be found in domain WCFC_RTE_ELEMENT (value range list)
    However, you can directly use the identifier (control name) of the TinyMCE button as listed in: https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
    Notice that there might be some buttons that are not integrated with the CRM Web Framework and might not work as expected since they require back-end support.
  2. ENABLED: abap_bool that indicates if the button is initially enabled or disabled.
  3. HIDDEN: abap_bool that indicated if the button will be initially hidden in the toolbar.
  4. TOOLBAR_LEVEL:  numeric value that specifies if the button will be part of row N in the toolbar.

 

For example if you want to use the “removeformat” option to be placed on the second row of your toolbar:

ls_toolbar_button-element = ‘removeformat’.
ls_toolbar_button-enabled = abap_true.
ls_toolbar_button-hidden = abap_false.
ls_toolbar_button-toolbar_level = 2.
INSERT INTO ls_toolbar_button INTO TABLE gt_btf_editor_toolbar.

 

 

Providing your own set of buttons requires custom code, for this we recommend the following approaches:

1)      Enhance the standard methods that deliver the default configuration of buttons via Implicit Enhancement Spots: https://wiki.scn.sap.com/wiki/display/ABAP/Step+by+step+to+enhance+ABAP+code+via+implicit+enhancement

2)      For some cases you could enhance the UI component that makes usage of the Rich Text Editor:  https://wiki.scn.sap.com/wiki/display/CRM/How+To+Enhance+a+Web+UI+Component+in+SAP+CRM

Both cases create custom code in customer’s namespace, which protects the code from upgrades.

 

Now that you know how to create your internal table with buttons, the next step is to use your own set of buttons in the applications.

 

1)      For the CRM Interaction Center E-mail View:

The IC E-mail view offers two options for buttons as described in SAP Note 1921115 “IC Email: parameter profile for BTF Editor toolbar buttons and print button”

When configuring the business role parameter ICMAIL_BTF_BUTTONS with IC_DEFAULT, you will be using the set of buttons provided by the IC E-mail application

The toolbar is defined in method:  CL_CRMCMP_C_MAILBODY_IMPL -> GET_BTF_EDITOR_TOOLBAR

In this case, you can either enhance the UI component CRMCMP_CCS_EML and redefine the above standard method or create an Implicit Enhancement Spot.

 

When using the BTF_DEFAULT option, you will be using the set of buttons provided by the default by the Rich Text Editor UI Element.

For this go to option (3)

 

2)      For the Creation of Personalized Mails or Mail Form
With SAP Note 2256794 – “Improve usability and functionality of the mailform application: editing and hyperlink functionality”, the mail form editor offers a direct integration with the Rich Text Editor UI Element.
Therefore this UI Application provides its own set of buttons defined in CL_PMLED_ED_EFEDITOR_IMPL   ->  PREPARE_TOOLBAR
In this case, you can either enhance the UI component PMLED_EDITOR and redefine the above standard method or create an Implicit Enhancement Spot.

 

3)      For other applications like the CRM One-2-One Outgoing correspondence:
In these cases, the applications do not offer their own set of buttons, therefore they use the by-default set of buttons offered by the Rich Text Editor UI Element.
The standard method that defines the set of buttons is CL_THTMLBX_RT_EDITOR_MCE  ->  CREATE_DEFAULT_TOOLBAR

Here, your only option is to create an Implicit Enhancement Spot of the above method.

 

Important remarks:

-          Buttons are sorted on the order of appearance in the code.

-          TinyMCE version 4 offers a MENU option, but this option is not supported by the Rich Text Editor UI Element.

-          As indicated in list:  https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols

There are some buttons that come with the core functionality but there are others that require an special plugin.

For this, the Rich Text Editor UI element offers an advanced configuration option.  Among other things you can add or remove plugins via this option.  Here, you have to provide a JSON-like configuration.
For example the “fullscreen” button needs to use the “fullscreen” plugin.  It is not enough to add the button into the toolbar. Then, the configuration attribute must receive the following information:
“plugins” : “+fullscreen”.

The IC E-mail view makes usage of this configuration in the MailBody.htm view of the CRMCMP_CCS_EML component.
CL_CRMCMP_C_MAILBODY_IMPL  ->  GET_RTE_ADVANCED_CONFIG  (CRM 7.0 EhP3  SAP Note 2303616)

 

 

  • No labels

3 Comments

  1. Hi Christian Montoya,

    thank you for this helpful post. Could you elaborate more about the Rich Text Editor UI advanced configuration option? Is this something that I can do within the WebUI or do I need UI5 development?

    Many thanks in advance and with kindest regards,

    Yee-Tee

     

  2. Former Member

    Hello Yee-Tee,

    Yes, you can use this from the WebUI.  There is nothing special, you just need to know the configuration parameters you want to use.
    Have a look at TinyMCE configuration options:  https://www.tinymce.com/docs/configure.

    In the WebUI layout page of your view that uses the Rich Text Editor, you can pass a configuration parameter.
    Let's say for instance your want to convert all the font tags to spans : https://www.tinymce.com/docs/configure/content-filtering/#convert_fonts_to_spans
    Therefore, you need to pass this configuration to the rteMCE tag:

    <thtmlbx:rteMCE
                  id = "myRTE"
                  ......
                  configuration = "<%= | "convert_fonts_to_span" : "false",  "other_parameter" : "parameter_value" | %>"
                  />

    Or instead of writing it directly in the layout, your can create a method in the correspondent View Controller that return a JSON-like string.
                  configuration = "<%= controller->get_tinymce_advanced_configuration( ) %>"

    If you need to modify a standard view, this requires the enhancement of the view to modify.

    I hope it helps,
    Christian

     

     

  3. Thank you for your quick response Christian.

     

    Kindest regards,

     

    Yee-Tee