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

[bhoang]

Hi all,

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

How to use RTE same as below?

Please help me,

Thank & best regards,

BienHV

[smacdonald2008]

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

[bhoang]

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]

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

[smacdonald2008]

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]

Thanks you,

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

2. How to use richtext as Clasic UI?

Thanks for your help!

BienHV

[bhoang]

Hi friends,

How to setup number of row for the richText?