Article summary

Summary

Discusses how to work with plugins available with the Touch UI Rich Text Editor.

A special thank you to Ratna Kumar Kotla, a  top AEM community member, for submitting content used in this article.

Digital Marketing Solution(s) Adobe Experience Manager 6.2/6.3
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.2, 6.3

Download

You can download an AEM package that contains the JCR nodes that are used in this article. Download the package and deploy using package manager. You can view the application by using the following URL: 

http://localhost:4502/editor.html/content/TestTouchRTE.html (assuming you deploy on author)

Introduction

You can create an Adobe Experience Manager (AEM) Touch UI component dialog which contains the Rich Text Editor (RTE) . As a component developer, you can configure the RTE when developing a component by setting JCR nodes that correspond to RTE plugins. A RTE provides authors with a wide range of functionality for editing text. That is, providing them with icons, selection boxes and menus for a WYSIWYG experience.

dialog1
A touch UI dialog that contains the RTE plugin

Note:

For information about editing the RTE inline editor, see Configuring the Adobe Experience Manager Touch UI RTE for in-line editor.

Overlay the Text Component

Copy the existing text component located here:

/libs/foundation/components/text

to

/apps/touchRTE/components

To configure the Touch UI dialog RTE, perform these steps:

1. Overlay the text component as described in this section.

2. Change the jcr:title property to TextRTE.

3. The default text component(/libs/foundation/components/text) is already included with a few RTE Plugins. For example:

  • Format, 
  • Justify
  • Lists
  • Paraformat
  • Links
  • Table

The following illustration shows the default nodes. 

nodes
Default nodes for the RTE plugins

Add the remaining RTE Plugins

To configure the AEM Touch UI RTE, you build JCR nodes and properties, similar to building a component dialog. The following illustration shows the JCR nodes that control the behavior of the AEM Touch UI RTE.

nodes2
JCR Nodes for the Touch UI dialog RTE

Note:

Additional Plugins of RTE in Touch UI dialog will work only if you include the uiSettings (in [2]) node under the text node. (Creation of uiSettings node will be shown later in the development article).

Findreplace functionality

You can create find and replace functionality as a plugin, as shown in the following illustration. 

find1
FindReplace functionality in the Touch UI dialog RTE

Create the findreplace node by performing these tasks:

1. Select the following node:  /apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins

2. Right click and select Create, Create Node. Enter the following values:

  • Name: findreplace
  • Type: nt:unstructured

3. Add the following property to the findreplace node.

  • features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

Subsuperscript functionality

You can create sub and superscript functionality as a plugin.

ss1
Subsuperscript functionality in the Touch UI dialog RTE

Create the subsuperscript node by performing these tasks:

1. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/subsuperscript

2. Right click and select Create, Create Node. Enter the following values:

  • Name: subsuperscript
  • Type: nt:unstructured

3. Add the following property to the subsuperscript node.

  • features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

Spellcheck functionality

You can add a spellchecker plugin. 

spell1
Spellcheck functionality in the Touch UI RTE

Create the spellcheck node by performing these tasks:

1. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/spellcheck

2. Right click and select Create, Create Node. Enter the following values:3

  • Name: spellcheck
  • Type: nt:unstructured

3. Add the following property to the spellcheck node.

  •  features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)
     

Misctools functionality

Miscellaneous tools allow you to enter special characters. Special characters can be made available to your rich text editor; these might vary according to your installation. For example, consider the following illustration.

special
Misctools functionality in the Touch UI dialog RTE

Create the misctools nodes by performing these tasks:

1. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: misctools
  • Type: nt:unstructured

3. Add the following property to the misctools node.

  • features (String) - * (defines which features of the plugin are activated. You may provide a String value of "*" to enable all features)

4. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools.

5. Right click and select Create, Create Node. Enter the following values:

  • Name: specialCharsConfig
  • Type: nt:unstructured

6. Select the following node: /apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig.

7. Right click and select Create, Create Node. Enter the following values:

  • Name: chars
  • Type: nt:unstructured

8. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig/chars.

9. Right click and select Create, Create Node.

10. Enter the following values:

  • Name: pound
  • Type: nt:unstructured

11. Add the following property to the pound node.

  • entity (String) - £

12. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig/chars.

13. Right click and select Create, Create Node.

14. Enter the following values:

  • Name: nbsp
  • Type: nt:unstructured

15. Add the following property to the nbsp node.

  • entity (String) -  

16. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig/chars.

17. Right click and select Create, Create Node.

18. Enter the following values:

  • Name: registered
  • Type: nt:unstructured

19. Add the following property to the registered node.

  • entity (String) - ®

20. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig/chars.

21. Right click and select Create, Create Node.

22. Enter the following values:

  • Name: copyright
  • Type: nt:unstructured

23. Add the following property to the copyright node.

  • entity (String) - ©

24. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig/chars.

25. Right click and select Create, Create Node.

26. Enter the following values:

  • Name: trademark
  • Type: nt:unstructured

27. Add the following property to the trademark node.

  • entity (String) - ™

28. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/misctools/specialCharsConfig/chars.

29. Right click and select Create, Create Node.

30. Enter the following values:

  • Name: emDash
  • Type: nt:unstructured

31. Add the following property to the emDash node.

  • entity (String) - —

 

Styles functionality

You can create styling text fragments with a CSS class (using "span" tags) functionality as a plugin. 

styles1
Styles functionality in Touch UI dialog RTE

Create the styles node by performing these tasks:

1. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: styles
  • Type: nt:unstructured

3. Add the following properties to the styles node.

  • features (String) - * (defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

4. Select the following node:

/apps/touchRTE/components/text/cqcq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/styles.

5. Right click and select Create, Create Node. Enter the following values:

  • Name: styles
  • Type: nt:unstructured

6. Select the following node:

/apps/ touchRTE /components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/styles/styles.

7. Right click and select Create, Create Node. Enter the following values:

  • Name: plainSpan
  • Type: nt:unstructured

8. Add the following properties to the plainSpan node.

  • cssName (String) - defaultSpan
  • text (String) - Default (add span tag)

9. Select the following node:

/apps/ touchRTE /components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins/styles/styles.

10. Right click and select Create, Create Node. Enter the following values:

  • Name: lead
  • Type: nt:unstructured

11. Add the following properties to the lead node.

  • cssName (String) - lead
  • text (String) - Lead
     

Table Functionality

You can add table functionality using a plugin. 

table0
Table functionality in the Touch UI dialog RTE

When you set the table, you will see a table in the AEM RTE, as shown here. 

table1
A Table in the AEM RTE

Perform these tasks: 

1. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/rtePlugins

2. Right click and select Create, Create Node. Enter the following values:

  • Name: table
  • Type: nt:unstructured

3. Add the following property to the findreplace node.

  • features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

Creation of uiSettings node

1. Select the following node:

/apps/ touchRTE /components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text

2. Right click and select Create, Create Node. Enter the following values:

  • Name: uiSettings
  • Type: nt:unstructured

3. Select the following node:

/apps/ touchRTE /components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings.


4. Right click and select Create, Create Node. Enter the following values:

  • Name: cui
  • Type: nt:unstructured

5. Select the following node:

/apps/ touchRTE /components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings/cui.


6. Right click and select Create, Create Node. Enter the following values:

  • Name: inline
  • Type: nt:unstructured

7. Add the following property to the inline node [Add all the values with Multi button selected]

 

Name Type Value Description
toolbar String[] format#bold
format#italic
format#underline
#justify
#lists
subsuperscript#subscript
subsuperscript#superscript
links#modifylink
links#unlink
links#anchor
findreplace#find
findreplace#replace
spellcheck#checktext
misctools#specialchars
misctools#sourceedit
#styles
#paraformat
table#table
 
Defines the features of the plugins are activated

8. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings/cui/inline.

9. Right click and select Create, Create Node. Enter the following values:

  • Name: popovers
  • Type: nt:unstructured

The popover node under inline contains a list of the popovers being used. Each child node under the 'popovers' node is named after the plugin (e.g. format). It has a property 'items' containing a list of features of the plugin (e.g. format#bold).


The purpose of using popovers is to hold the features of a plugin and it is specified as ‘#PluginName’. For example, #justify. Suppose Justify plugin has Align text left, Center text and Align Text right (See the following screenshot). 

just
Justify plugins in Touch UI dialog RTE

#justify is value in the toolbar property that is defined in toolbar node. This is how you define the popovers and the plugins to be referred in the toolbar property.

10. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings/cui/inline/popovers

11. Right click and select Create, Create Node. Enter the following values:

  • Name: justify
  • Type: nt:unstructured

12. Add the following properties to the justify node [Add all the values with Multi button selected]
 

Name Type Value Description
items String[]

justify#justifyleft

justify#justifycenter

justify#justifyright

Defines the features of the plugins are activated
ref String justify This is to refer #justify in the toolbar property in inline node.
 

13. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings/cui/inline/popovers

14. Right click and select Create, Create Node. Enter the following values:

  • Name: lists
  • Type: nt:unstructured

15. Add the following properties to the lists node [Add all the values with Multi button selected].
 

Name Type Value Description
items String[] lists#unordered
lists#ordered
lists#outdent
 
Defines
the features of the plugins are activated. 
ref String lists This is to refer #lists in the toolbar property in inline node.

16. Select the following node:

/apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings/cui/inline/popovers

17. Right click and select Create, Create Node. Enter the following values:

  • Name: paraformat
  • Type: nt:unstructured

18. Add the following properties to the paraformat node.
 

Name Type Value Description
items String[] paraformat:getFormats:paraformat-pulldown Defines the features of the plugins are activated.
ref String paraformat This is to refer #paraformat in the toolbar property in inline node

19. Select the following node:

/apps/touchRTE /components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text/uiSettings/cui/inline/popovers

20. Right click and select Create, Create Node. Enter the following values.

  • Name: styles
  • Type: nt:unstructured

21. Add the following properties to the styles node:
 

Name Type Value Description
items String[] styles:getStyles:styles-pulldown Defines the features of the plugins are activated
ref String styles This is to refer #styles in the toolbar
property in inline node.

Note:

To learn how to build a Touch UI component to which you can apply a dialog that uses a RTE, see Creating an AEM HTML Template Language component that uses the WCMUsePojo class.

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy