RTE plugin in Touch UI or rich text editor is used to provide a wide range of options to users for performing content authoring. Each of the E RTE plugins can be individually activated or deactivated from crxde.
After completing this tutorial. you will have a clear understanding of:
Creating a Component to hold RTE Plugins in Touch UI.
How to Create RTEPlugin Node.
How to configure RTE ParaFormat Plugin in Touch UI.
Create a Text Component to hold RTE Plugins in Touch UI:
We can copy the default Text Component from libs and configure it according to our business needs. The default implementation is available at below locations:
/libs/wcm/foundation/components/text [ Note:-If you are using Sightly]
/libs/foundation/components/text [ Note:- If you are using jsp]
Follow below steps to create a Text component which will hold our RTE Plugins:
Go to /libs/foundation/components/text . right click and copy Text component.
Paste Default Text component to Our components folder /apps/<project-name>/components .
Note:- This process is also know as overlay.
Double click on group name and change it to some project specific group name.
Note:- sling:superResourceType parbase is added to component so that it can inherit attributes from other components. Like if you want your component to be authorable and draggable add parbase to it. So that they can inherit the image and text rendering properties when added to a Paragraph system.
We can copy the default Text Component from libs and configure it according to our business needs. The default implementation is available at below locations:
/libs/wcm/foundation/components/text [ Note:-If you are using Sightly]
/libs/foundation/components/text [ Note:- If you are using jsp]
Follow below steps to create a Text component which will hold our RTE Plugins:
Go to /libs/foundation/components/text . right click and copy Text component.
Paste Default Text component to Our components folder /apps/<project-name>/components .
Note:- This process is also know as overlay.
Double click on group name and change it to some project specific group name.
Note:- sling:superResourceType parbase is added to component so that it can inherit attributes from other components. Like if you want your component to be authorable and draggable add parbase to it. So that they can inherit the image and text rendering properties when added to a Paragraph system.
Create RTEPlugin Node to store Configuration Details :
RTE Plugin Node is used to store configuration details and the location from where users can activate or deactivate respective rich text editor plugins.
Remove Following Page Properties from cq:inplaceEditing Node.
configPath: String: text (It is shown in adobe docs but do not create any intermediate node as config for backward compatibility in touch ui. else your paraformat and style plugin won’t work in Touch UI.)
Click Save ALL.
Right Click on cq:inplaceEditing node and Select Create Node.
Create a nt:unstructured Node for config.
Right Click on cq:inplaceEditing node and Select Create Node.
Create a nt:unstructured Node for rtePlugins.
Note:- Remember your Node name should be rtePlugins only else rte text component won’t work.
Your RTE Plugin Node is created , where we can add RTE Plugins according to business need. Lets see below in detail how to create different types of RTE Plugins in Touch UI.
RTE Plugin Node is used to store configuration details and the location from where users can activate or deactivate respective rich text editor plugins.
Remove Following Page Properties from cq:inplaceEditing Node.
configPath: String: text (It is shown in adobe docs but do not create any intermediate node as config for backward compatibility in touch ui. else your paraformat and style plugin won’t work in Touch UI.)
Click Save ALL.
Right Click on cq:inplaceEditing node and Select Create Node.
Create a nt:unstructured Node for config.
Right Click on cq:inplaceEditing node and Select Create Node.
Create a nt:unstructured Node for rtePlugins.
Note:- Remember your Node name should be rtePlugins only else rte text component won’t work.
Your RTE Plugin Node is created , where we can add RTE Plugins according to business need. Lets see below in detail how to create different types of RTE Plugins in Touch UI.
Methods for Configuring and Activating RTE Plugin in Touch UI:
There are two methods for configuring any rte plugin in touch ui.
Method 1:- To activate all features for this plugin. This will activate all default feature for this plugin and you need not required to create individual node for each feature. To use this method follow below steps:
Add Following Page Properties to paraformat Node.
features: String: *(asterisk)
Method 2:- To activate selected features. Follow below steps:
Add Following Page Properties to paraformat Node
features: String[] : Values [ Note:- Use selected Values that you want to display, In this case for single value also we need to use String[] ]
There are two methods for configuring any rte plugin in touch ui.
Method 1:- To activate all features for this plugin. This will activate all default feature for this plugin and you need not required to create individual node for each feature. To use this method follow below steps:
Add Following Page Properties to paraformat Node.
features: String: *(asterisk)
Method 2:- To activate selected features. Follow below steps:
Add Following Page Properties to paraformat Node
features: String[] : Values [ Note:- Use selected Values that you want to display, In this case for single value also we need to use String[] ]
Steps to Configure Rich Text Editor(RTE) ParaFormat Plugin in Touch UI:
Para Format plugin provides content authors the ability to select different paragraph formats based on their content. Once our RTE Plugin Node is create we can add Plugins an their features to this Node. Follow below steps to configure a ParaFormat Plugin in Touch UI.
Right Click on rtePlugin node and Select Create Node.
Create a nt:unstructured Node for paraformat.
Select the type of method you want to use for displaying features according to your business need.
Right Click on paraformat node and Select Create Node.
Create a nt:unstructured Node for format.
Right Click on paraformat node and Select Create Node.
Create a nt:unstructured Node for paragraph(different features).
Add following page Properties to myParagraph Node.
description : String: This is my Paragraph (Any custom Description).
tag : String : p [ Note : This is the block tag for the formats. for example: p, h1, h2, etc. By Default till h3 is supported]
Right click on format Node and create 3 more Nodes for h1, h2 and h3 as we have created for paragraph.
Your Paraformat Structure should look like this.
Para Format plugin provides content authors the ability to select different paragraph formats based on their content. Once our RTE Plugin Node is create we can add Plugins an their features to this Node. Follow below steps to configure a ParaFormat Plugin in Touch UI.
Right Click on rtePlugin node and Select Create Node.
Create a nt:unstructured Node for paraformat.
Select the type of method you want to use for displaying features according to your business need.
Right Click on paraformat node and Select Create Node.
Create a nt:unstructured Node for format.
Right Click on paraformat node and Select Create Node.
Create a nt:unstructured Node for paragraph(different features).
Add following page Properties to myParagraph Node.
description : String: This is my Paragraph (Any custom Description).
tag : String : p [ Note : This is the block tag for the formats. for example: p, h1, h2, etc. By Default till h3 is supported]
Right click on format Node and create 3 more Nodes for h1, h2 and h3 as we have created for paragraph.
Your Paraformat Structure should look like this.
Your Paragraph RTE Plugin is ready to use.
Test Paragraph RTE Plugin in Touch UI:
Go to Site admin.
Double click on a page to open it in Touch UI Authoring.
You can see your Text component in Side Panel, if component is not Visible. Click here to see How to display component in Touch UI.
Drag and drop your text component to parsys. Click on maximize window or full screen icon.
Test Paragraph RTE Plugin in Touch UI:
Go to Site admin.
Double click on a page to open it in Touch UI Authoring.
You can see your Text component in Side Panel, if component is not Visible. Click here to see How to display component in Touch UI.
Drag and drop your text component to parsys. Click on maximize window or full screen icon.
Note: The paragraph component will be visible only in full screen mode. Many components are not visible in compact Toolbar.
Similarly we can configure other features like MiscTools, Sub SuperScript, Style etc.
Click here to view AEM community article, with step by step explanation for MiscTools, Sub SuperScript, Style etc.
If you face any issue in configuring them please let me know.
Note:- In AEM 6.2 and 6.3 you might face an issue where rte paraformat collapses in chrome. To fix this there are two solutions either install AEM 6.3 service pack 1 or open your chrome browser and go to chrome://flags/ and disable Touch Events API Mac, Windows, Linux, Chrome OS.
Similarly we can configure other features like MiscTools, Sub SuperScript, Style etc.
Click here to view AEM community article, with step by step explanation for MiscTools, Sub SuperScript, Style etc.
If you face any issue in configuring them please let me know.
Note:- In AEM 6.2 and 6.3 you might face an issue where rte paraformat collapses in chrome. To fix this there are two solutions either install AEM 6.3 service pack 1 or open your chrome browser and go to chrome://flags/ and disable Touch Events API Mac, Windows, Linux, Chrome OS.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.