No proper documentation/sample ones for creating RTE plugins in Touch UI

[Ratna_Kumar]

Hi Team,

I have come across this link: https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html for configuring RTE in touch UI.

But still its not clear in that link, for how to create RTE in touch UI. As they mentioned, we need to create RTE in touch UI under 

• In-place editing (touch-optimized UI and classic UI):

  • .../text/cq:editConfig/cq:inplaceEditing/config/rtePlugins

  NOTE

  If, for example for backward compatibility reasons, the node under cq:inplaceEditing is called something other than config, then ensure that on the intermediate node:

  • cq:inplaceEditing

  The following property is defined:

  • Name: configPath
  • Type: String
  • Value: name of the node used for the configuration definitions (i.e. the equivalent ofconfig; e.g. in some previous cases it was defined as inplaceEditingTextConfig)

• Editing in a Dialog (classic UI only):

  • .../text/dialog/items/tab1/items/text/rtePlugins

But still I am not able to achieve it. As suggested, I created the rtePlugins under 

• .../text/cq:editConfig/cq:inplaceEditing/config/rtePlugins

and created plugins(Paraformat, Styles, Misctools, Spellcheck etc) of type node nt:unstructured, But still plugins showing nothing in the RTE touch UI.

And also there are lot of confusions in this link. 

• Using CRXDE Lite, locate the text component for your project.

• Depending on your component you might need to create parent node of <rtePlugins-node> before configuring any RTE plugins:

  • Depending on your component the parent nodes:
    • config
      • as in
        .../text/cq:editConfig/cq:inplaceEditing/config
    • an alternative configuration node
      • as in
        .../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
    • text
      • as in
        .../text/dialog/items/tab1/items/text
  • Are of type:
    • jcr:primaryType cq:Widget
  • Both have the following property:
    • Name name 
    • Type String
    • Value ./text

As far as I know, /text/cq:editConfig/cq:inplaceEditing/config  will be used to create rtePlugin for touch UI under config. Then what is the need to give alternative configuration node text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig  and what is Are of type:

• jcr:primaryType cq:Widget

We generally don't use cq:widget in AEM6 + versions. Then what is the need to give cq:widget, it must be nt:unstructured.

--> Another thing, Styles(Text) is not clear in this document.(CSS stuff)

The same question, I asked in the forums 3 days back: http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...,

But I didn't get the proper response, as there is not really proper documentation in Adobe site. As we are referring to sites like

http://experience-aem.blogspot.ca/2013/08/in-blog-experiencing-adobe-experience.html -> Really having some gud stuff, but not having how to create RTE in touch UI(Step by step)

Why don't we have some good stuff on RTE in touch UI on Adobe(docs.day) sites?

Thanks,
Ratna Kumar.

[smacdonald2008]

We will add this to to the community list for helpx articles. 

[AnkurAhlawat · Accepted solution]

Hi Ratna, I have fixed the issue with your Rich Text Edited component and mailed you the same. There was extra nodes created for ParaFormat plugin.

I am also writing a step by step tutorial on how to create a RTE component in Touch UI. Will post its link Soon..

[Saif_mohd]

Hi AnkurAhlawat
May I get the link which you mentioned here
Thanks
Saif

[Ratna_Kumar]

Hi Ankur,

Thank you very much Ankur for fixing the issue for Touch UI RTE!!! It is perfectly working.

Now I got to know, where I went wrong.

Thanks,
Ratna Kumar.

[Ratna_Kumar]

Hi Team,

In-place editing (touch-optimized UI and classic UI):

• .../text/cq:editConfig/cq:inplaceEditing/config/rtePlugins

NOTE

If, for example for backward compatibility reasons, the node under cq:inplaceEditing is called something other than config, then ensure that on the intermediate node:

• cq:inplaceEditing

The following property is defined:

• Name: configPath
• Type: String
• Value: name of the node used for the configuration definitions (i.e. the equivalent ofconfig; e.g. in some previous cases it was defined as inplaceEditingTextConfig)

In above image, the property named configPath under cq:inplaceEditing,  will not work for Touch UI. It must be removed.

Thanks,
Ratna Kumar.

[siva_chandulur1]

Hi Team,

Please let me know if someone could able to configure all the RTE plugins in a Touch UI dialog mode(Not inplace edit config) and if it works. I have attempted it by configuring the plugins in a common location and refereed them from my touch dialog node using sling:resourceSuperType and also have configured ui settings to enable the required features for each plugin. But I see lot of functional and UI issues. Any feature pack available from Adobe addressing these or road map.

Thanks,

Siva

[Ratna_Kumar]

Hi Siva,

I hope you are good.

1. Right now in AEM6.1, if you include all the RTE plugins in Touch UI dialog mode, only default plugins will be appear in dialog. Yes, this is a bug. This is not available in SP1 too. Might be this feature will be enabled in up-coming version AEM6.2 in next month.

If you need for time being, you can go to Classic mode and input the content using RTE plugins in classic dialog.

2. Yes, Like in classic, you can store the RTE plugins in one location and refer the plugins through "xtype:cqinlcude" and path: ..../infinity.json

But in Touch you can re-use RTE widgets like "sling:resourceType: granite/ui/components/foundation/include" and path: ...  But It still RTE plugins re-use won't work in dialog mode.

I already raised this thread: http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

Lets wait for upcoming version AEM 6.2

Thanks,
Ratna Kumar.