Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

How to use rich text editor (RTE) in coral ui?

Avatar

Level 4

Hi all,

I want to use RTE in the form field for admin.

RTE.PNG

How to use RTE same as below?

RTE-2.PNG

Please help me,

Thank & best regards,

BienHV

6 Replies

Avatar

Level 10

Have you tried to overlay that form and include the sling resource type?

Avatar

Level 4

I don't understant your question. I created a structure page and template. So I create the textarea field in cq:dialog for that page structure. After that, I create a page and input the content for them field. I want use the RTE for some field in the form. But i don't know how to do that.

Could you guide line for me?

Thanks you!

Avatar

Level 10

I have checked internally for this. I will post back response.

Avatar

Level 10

Here is the reply from the AEM team on this question:

Don’t use textarea, but use the resource type  cq/gui/components/authoring/dialog/richtext

1) in aem check /libs/foundation/components/text/cq:dialog/content/items/text/items/column/items/text

2) or https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/...

3) or example  node config below

<text
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
name="./text"
useFixedInlineToolbar="{Boolean}true"
>
<
rtePlugins jcr:primaryType="nt:unstructured">
<
format
jcr:primaryType="nt:unstructured"
features="bold,italic"
/>
<
justify
jcr:primaryType="nt:unstructured"
features="-"
/>
<
links
jcr:primaryType="nt:unstructured"
features="modifylink,unlink"
/>
<
lists
jcr:primaryType="nt:unstructured"
features="*"
/>
<
misctools jcr:primaryType="nt:unstructured">
<
specialCharsConfig jcr:primaryType="nt:unstructured">
  <
chars jcr:primaryType="nt:unstructured">
  <
default_copyright
 
jcr:primaryType="nt:unstructured"
 
entity="&amp;copy;"
 
name="copyright"
/>
  <
default_euro
 
jcr:primaryType="nt:unstructured"
 
entity="&amp;euro;"
 
name="euro"
/>
  <
default_registered
 
jcr:primaryType="nt:unstructured"
 
entity="&amp;reg;"
 
name="registered"
/>
  <
default_trademark
 
jcr:primaryType="nt:unstructured"
 
entity="&amp;trade;"
 
name="trademark"
/>
  </
chars>
</
specialCharsConfig>
</
misctools>
<
paraformat
jcr:primaryType="nt:unstructured"
features="*"
>
<
formats jcr:primaryType="nt:unstructured">
  <
default_p
 
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"
/>
  <
default_blockquote
 
jcr:primaryType="nt:unstructured"
 
description="Quote"
 
tag="blockquote"
/>
  <
default_pre
 
jcr:primaryType="nt:unstructured"
 
description="Preformatted"
 
tag="pre"
/>
</
formats>
</
paraformat>
<
table
jcr:primaryType="nt:unstructured"
features="-"
>
<
hiddenHeaderConfig
 
jcr:primaryType="nt:unstructured"
 
hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
 
hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"
/>
</
table>
<
tracklinks
jcr:primaryType="nt:unstructured"
features="*"
/>
</
rtePlugins>
<
uiSettings jcr:primaryType="nt:unstructured">
<
cui jcr:primaryType="nt:unstructured">
<
inline
 
jcr:primaryType="nt:unstructured"
 
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]"
>
  <
popovers jcr:primaryType="nt:unstructured">
  <
justify
 
jcr:primaryType="nt:unstructured"
 
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
 
ref="justify"
/>
  <
lists
 
jcr:primaryType="nt:unstructured"
 
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
 
ref="lists"
/>
  <
paraformat
 
jcr:primaryType="nt:unstructured"
 
items="paraformat:getFormats:paraformat-pulldown"
 
ref="paraformat"
/>
  </
popovers>
</
inline>
<
dialogFullScreen
 
jcr:primaryType="nt:unstructured"
 
toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]"
>
  <
popovers jcr:primaryType="nt:unstructured">
  <
paraformat
 
jcr:primaryType="nt:unstructured"
 
items="paraformat:getFormats:paraformat-pulldown"
 
ref="paraformat"
/>
  </
popovers>
</
dialogFullScreen>
<
tableEditOptions
 
jcr:primaryType="nt:unstructured"
 
toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"
/>
</
cui>
</
uiSettings>
</
text>

Avatar

Level 4

Thanks you,

1. I want to set the rows and column for the richtext box. Example the text box same as 20 rows.

rich-text-1.PNG

2. How to use richtext as Clasic UI?

ric-text-clasic-ui.PNG

Thanks for your help!

BienHV

Avatar

Level 4

Hi friends,

How to setup number of row for the richText?