May 10, 2020
Estimated Post Reading Time ~ 3 mins

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+

1
Color Picker, Style Picker Plugins and HTML DOM navigation

2
RTE Element Selection from DOM navigation

3
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
Pre-selected style

select-another-style
Applying another style to list

remove-style
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.

text-node-style
Style is added to P tag

OOTB-Style-plugin
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:
Code Package
Sample Test Component

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.

rte-bred-prop
ShowBreadcrumb property in RTE item node

RTE-bred2
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-1
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

stylePicker-2

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"}
]

Screenshot+2019-07-15+at+11.37.22+PM
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.

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

uiSettings

3. Color Picker Plugin

colorPicker-1
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.

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

uiSettings

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
aem4beginner.blogspot


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

Please Disable your adblocker and Refresh the page to view the site content.