Facing issues with the RTE plugins [maximize and done button not showing up in inline mode and when went into configure mode, the plugins are not showing up]

[Shiva-kumar]

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 resolve this issue.

Screenshot of the Inline mode of textarea component
-----------------------------------------------------------------------

Component name: Shiva text
------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

    jcr:description="A Simple Static Text Component"

    jcr:primaryType="cq:Component"

    jcr:title="Shiva Text"

    componentGroup="SHIVA AEM KT SESSIONS - Content"/>

-------------------------------------------------------------------------------------------

cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Shiva Text"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items
jcr:primaryType="nt:unstructured"

<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
fieldDescription="This is a simple text area created by Shiva"
fieldLabel="Text"
name="./text"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*">
<format jcr:primaryType="nt:unstructured">
<default_paragraph
jcr:primaryType="nt:unstructured"
description="Paragraph"
tag="p"/>
<default_h1
jcr:primaryType="nt:unstructured"
description="Heading 1"
tag="h1"/>
<default_h2
jcr:primaryType="nt:unstructured"
description="Heading 2"
tag="h2"/>
<default_h3
jcr:primaryType="nt:unstructured"
description="Heading 3"
tag="h3"/>
<default_h4
jcr:primaryType="nt:unstructured"
description="Heading 4"
tag="h4"/>
<default_h5
jcr:primaryType="nt:unstructured"
description="Heading 5"
tag="h5"/>
<default_h6
jcr:primaryType="nt:unstructured"
description="Heading 6"
tag="h6"/>
<blockquote
jcr:primaryType="nt:unstructured"
description="Block Quote"
tag="blockquote"/>
<preformatted
jcr:primaryType="nt:unstructured"
description="Preformatted"
tag="pre"/>
</format>
</paraformat>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[#format,#lists,#justify,findreplace#find,findreplace#replace,subsuperscript#subscript,subsuperscript#superscript,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
items="[format#bold,format#italic,format#underline]"
ref="format"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
</popovers>
</inline>
</cui>
</uiSettings>
</text>
</items>
</column>
</items>
</content>
</jcr:root>

----------------------------------------------------------------------------------------------------------------------------------------

cq:editConfig

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:EditConfig">
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
configPath="inplaceEditingConfig"
editorType="text">
<inplaceEditingConfig jcr:primaryType="nt:unstructured">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*">
<format jcr:primaryType="nt:unstructured">
<default_paragraph
jcr:primaryType="nt:unstructured"
description="Paragraph"
tag="p"/>
<default_h1
jcr:primaryType="nt:unstructured"
description="Heading 1"
tag="h1"/>
<default_h2
jcr:primaryType="nt:unstructured"
description="Heading 2"
tag="h2"/>
<default_h3
jcr:primaryType="nt:unstructured"
description="Heading 3"
tag="h3"/>
<default_h4
jcr:primaryType="nt:unstructured"
description="Heading 4"
tag="h4"/>
<default_h5
jcr:primaryType="nt:unstructured"
description="Heading 5"
tag="h5"/>
<default_h6
jcr:primaryType="nt:unstructured"
description="Heading 6"
tag="h6"/>
<blockquote
jcr:primaryType="nt:unstructured"
description="Block Quote"
tag="blockquote"/>
<preformatted
jcr:primaryType="nt:unstructured"
description="Preformatted"
tag="pre"/>
</format>
</paraformat>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[#format,#lists,#justify,findreplace#find,findreplace#replace,subsuperscript#subscript,subsuperscript#superscript,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<format
jcr:primaryType="nt:unstructured"
items="[format#bold,format#italic,format#underline]"
ref="format"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify"/>
</popovers>
</inline>
</cui>
</uiSettings>
</inplaceEditingConfig>
</cq:inplaceEditing>
</jcr:root>
----------------------------------------------------------------------------------------------------------------------------------------

Please help me where I went wrong! and It would be more helpful if anyone can provide me an example with complete rte plugins.

Thanks everyone
Shiva

[lukasz-m · Accepted solution]

Hi @Shiva-kumar,

In general the problem is that you are trying to use RTE plugins with textarea - this is incorrect. Textarea support plain text only. Please use RTE resource type cq/gui/components/authoring/dialog/richtext.

I would recommend you to have a look how Text component from Core component is implemented, here is url to dialog implementation:

• https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

and 2 links to Adobe documentation:

• https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/configure-ric...
• https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/rich-text-edi...

Above documentation describes not only available RTE plugins but also inline, fullscreen and dialog editing options.