Tuesday, 16 July 2019

AEM - Touch UI - RTE HTML Element Selector, Custom Style Plugin & Color Picker Plugin

Touch UI RTE is the always challenging topic because of a lack of documentation to create or customize plugins, There are great articles at http://experience-aem.blogspot.com/2013/08/in-blog-experiencing-adobe-experience.html which talk about RTE plugins. I got the idea from ColorPicker plugin and tried to create a new Style Picker plugin which may help AEM community to achieve more from RTE.


This blog covers : 
HTML DOM Navigation and HTML element selector inside RTE Editor
Custom Style(Style Picker) Plugins
Color Picker Plugin

  • HTML DOM Elements Navigator extension:
    • Shows selected/current HTML element's DOM structure in RTE
    • Allows selecting an exact HTML element in RTE to apply settings using RTE plugins.
  • Style Picker Plugins apply a class attribute to selected HTML elements unlike OOTB style plugin create span tag. The exact HTML element can be selected from DOM navigator e.g. ul, ol, hr, p, div, img etc. These elements can be selected by DOM Element Navigator and class can be applied to them. 
  • The Color Picker Plugin as same as ColorPicker Plugin from http://experience-aem.blogspot.com but I modified it to work with all AEM version from 6.3+



Color Picker, Style Picker Plugins and HTML DOM navigation




RTE Element Selection from DOM navigation




Applying class to ul element using Style Picker

When selected item already has existing styles, the style will be pre-selected in the dropdown, If another style is chosen, the new class will be added and existing class will also remain, this will allow applying multiple styles to a single element.
In case of applying a different style or a single style to an element then an existing style should be chosen and removed using the Remove Style button. 


Pre-selected style


Applying another style to list



Removing style from the list


If only a text is selected for applying the style using this custom style picker plugin, the style will be added to its parent's node. If you want to apply a style to text using a span tag, use OOTB style plugin.


Style is added to P tag



OOTB style plugin, style added with a span tag



Note: If multiple HTML items are selected then the style will be applied to only one element.



Code

You can install below packages from GitHub to use these plugins in AEM 6.3+
Packages contain:
AEMaaCS version - aem-rte-plugins-1.5.zip


Details



1. DOM Elements Navigation and Selector inside RTE Editor

In RTE, the element tree breadcrumb is created at the bottom section of RTE, which shows the DOM navigation and allow a user to select a particular HTML element in RTE by clicking on breadcrumb items.

RTE Navigation will only be shown for the RTE which has showBreadcrumb property with true.


ShowBreadcrumb property in RTE item node


RTE DOM Tree


Although navigation can be enable for all the RTEs by changing below line in /apps/commons/rte/rte-breadcrumb/js/rte-breadcrumb.js file
replace
$('.coral-RichText[data-showbreadcrumb="true"]').each(function() {
                $(this).parent().find(".rte-sourceEditor").after(breadcrumbItem);
});

with 
$('.coral-RichText').each(function() {
                $(this).parent().find(".rte-sourceEditor").after(breadcrumbItem);
});


The DOM navigation extension is independent to style plugin and can be used with other plugins as well to select, cut, copy etc.


2. Custom Style Picker Plugins

StylePicker Plugin in RTE toolbar


After installing the package you can find the Style Picker Plugins files at:

Plugins JS and CSS at
/apps/commons/rte/plugins/clientlibs/js/style-picker.js
/apps/commons/rte/plugins/clientlibs/css/style-picker.css


Plugins popover dialogs
/apps/commons/rte/plugins/popovers/style-picker


Plugin Popover Dialog - dropdown option datasource and JSON at
  • /apps/commons/rte/plugins/popovers/style-picker/datasource
  • /apps/commons/rte/plugins/popovers/style-picker/options.json




Datasource is a JSP file which read json specified in options property and populates dropdown option for Style Picker plugin.
JSON file should have an array of elements in below format:

If want to show as Heading/Category use below format(value could be anything)
    {"text": "Background Color","value": "BTC","heading": "true"}


If Option

    {"text": "White","value": "white"}

Example : /apps/commons/rte/plugins/popovers/style-picker/options.json


[
    {"text": "Background Color","value": "BTC","heading": "true"},
    {"text": "White","value": "white"},
    {"text": "Black","value": "black"},
    {"text": "Green","value": "green"},
    {"text": "Orange","value": "orange"},
    {"text": "Light Grey","value": "lightgrey"},
    {"text": "List Style","value": "LS","heading": "true"},
    {"text": "Check","value": "list-checked"},
    {"text": "Cross","value": "list-crossed"},
    {"text": "Link Style","value": "LS","heading": "true"},
    {"text": "Primary","value": "btn-primary"},
    {"text": "Secondary","value": "btn-secondary"}
]


List Style and List Style are the Category and can't be selected


Plugin configuration in RTE
create 'styleformat' child node of rtePlugins node and create features property in it with * value as shown in below screenshot.





Add 'styleformat#styles' in toolbar property on inline node as shown in below screenshot.





3. Color Picker Plugin


ColorPicker Plugin in RTE toolbar


After installing the package you can find the ColorPicker Plugins files at :

Plugins JS and CSS at
/apps/commons/rte/plugins/clientlibs/js/color-picker.js
/apps/commons/rte/plugins/clientlibs/css/color-picker.css


Plugins popover dialogs
/apps/commons/rte/plugins/popovers/color-picker

Plugin configuration in RTE
create 'colorformat' child node of rtePlugins node and create features property in it with * value as shown in below screenshot.





Add 'colorformat#colorPicker' in toolbar property on inline node as shown in below screenshot.





Sample Components

Sample Test Component package contains a sample component (/apps/mfHTL63/components/content/simple-rte)

This component can be referred for ColorPicker and StylePicker Plugins configurations.


References


http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html

25 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi Arun, Thanks for this post. Just wanted to update you that This is not working on 6.4.8 service package. It is working fine on 6.4.2 service package. I have upgraded the service pack from 6.4.2 to 6.4.8. I can see the both plugins in richtext and whenever i click on any one of style/color icon then blank popup is opening.I see the below error in the console.

    VM21086 clientlibs.min.49f63fbc84fedf84417f20f67f1ee090.js:7 Uncaught ReferenceError: _ is not defined

    at clientlibs.min.49f63fbc84fedf84417f20f67f1ee090.js:7

    at Array.forEach ()

    at l (clientlibs.min.49f63fbc84fedf84417f20f67f1ee090.js:7)

    at clientlibs.min.49f63fbc84fedf84417f20f67f1ee090.js:9

    at clientlibs.min.49f63fbc84fedf84417f20f67f1ee090.js:9

    ReplyDelete
  4. Hi Arun , I think it is not able to find the "underscore dependency" in the AEM (Service pack 6.4.8) that 'y it throwing error. I tried to add same dependency directly in the style-picker.js and its working as expected but the behavior is not consistent, So whenever i am closing the style dialog it's throwing error apart from this it is working expected.

    Did you get a chance to look on this. Thank You. Good day..!!

    ReplyDelete
    Replies
    1. Thanks for the feedback Keshav. I will try this in 6.4.8 and fix if something is missing.

      Delete
    2. Hi Arun, Thanks for the response. I have fixed it , Actually underscore dependency was not loading in AEM 6.4.8, So i have added the underscores.js from https://underscorejs.org/ and added in the style-plugins and rte breadcrumbs js file, After doing, its working fine. Thank You.

      Delete
    3. Can you add the updated style-plugins js with dependency for underscore js added here? my dialog appears blank as of now due to this dependency issue

      Delete
  5. Nice knowledge gaining article. This post is really the best on this valuable topic. mailto link generator

    ReplyDelete
  6. I'm trying to use this in AEMaaCS and is not working, dialog appears blank (more specific, gray). Is there anything I need to change?

    ReplyDelete
    Replies
    1. Hi Gonzalo,
      I need to check this for AEMaaCS.

      Delete
  7. I have found that removing the underscore dependency is the most reliable long term solution to some of these issues. Simple remove all occurrences of _. from color-picker.js and add the following functions starting on line 2:

    isEmpty = function(item) {
    console.log('item = ',item);
    if(!item) { return true; }
    var len;
    if(item.length || item.length === 0){
    len = item.length;
    } else {
    if(typeof item === 'object') {
    len = Object.keys(item).length;
    }
    }
    return len === 0;
    }

    isUndefined = function(item) {
    if(item === undefined) {
    return true;
    } else {
    return false;
    }
    }

    defer = function(item) {
    setTimeout(() => {item()})
    }

    ReplyDelete
  8. Hi Arun, nice post. For us the issue is that the plugin takes lot more time to load. On edit, only text is displayed first and after 12/13 seconds the RTE icons show up. Is there any way it can be made faster to load?

    ReplyDelete
    Replies
    1. Hi,
      Could you please check without custom plugin, the custom plugin loaded with other plugins, there should not be any delay. Please let me know, I will have a look if you can find something but as far as from code side the delay can be caused when you click on icon to fetch plugin dialog.

      Delete
  9. Used with AACS, removed underscore dependency too; it works fine when there is single instance of RTE but as soon as two are added on the page the dialog breadcrumb comes only in 1st RTE component and not in second one. Anyone else faced this issue ?

    ReplyDelete
    Replies
    1. Actually the breadcrumb is getting added only first time when we open the dialog and not the second time.

      Delete
  10. To resolve _ is not defined issue
    Try changing dependency from underscore to lodash.underscore

    https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/rte-color-picker-not-working/m-p/446636/highlight/true#M127756

    ReplyDelete
  11. Hello Arun,
    I tried the plugin with latest SDK - Aem as a cloud service, it is not working.

    ReplyDelete
    Replies
    1. Hi Sonia,
      I need to check this for ACS Common, I will be let you know

      Delete
  12. AEMaaCS version is at https://github.com/arunpatidar02/aem63app-repo/blob/master/packages/rte/aem-rte-plugins-1.5.zip

    It still has some dialog overlay issue but plugins are in working state

    ReplyDelete
  13. Hi Arun Patidar,

    Firstly thank you for the awesome post, trying to implement the same in my local.
    AEM Version: 6.5.14
    I have started learning creation of aem components recently. Created a text component and want to activate the RTEPlugins for the textarea component.


    I am able to see the plugins in inline mode but not able to find the maximize and done buttons. When I went inside the component by clicking on the configure mode, the plugins itself are not getting displayed.

    Please help me where I went wrong! and It would be more helpful. if you can provide me an example with complete rte plugins. (Basic one and the custom rte plugins one)

    Thanks everyone
    Shiva

    ReplyDelete
  14. Hi,
    The reason could be that the plugin is not added in fullscreen mode.
    You can check below example for dialog
    https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/rich-text-editor.html?lang=en#dialogfullscreen

    ReplyDelete

AEMaaCS - Core Component's Children Editor

If you are using core components, you should be familiar with the children-editor for Tabs, Accordion, and Carousel. These components are th...

About Me

My photo
https://www.linkedin.com/in/arunpatidar26/ https://experienceleaguecommunities.adobe.com/t5/user/viewprofilepage/user-id/6786635 https://community.adobe.com/t5/user/viewprofilepage/user-id/12372253 https://forums.adobe.com/people/Arun+Patidar