Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

bhoang
Level 4
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
smacdonald2008
Level 10
Level 10

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

bhoang
Level 4
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!

smacdonald2008
Level 10
Level 10

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

smacdonald2008
Level 10
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>

bhoang
Level 4
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

bhoang
Level 4
Level 4

Hi friends,

How to setup number of row for the richText?