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

Avatar

Avatar

bhoang

Avatar

bhoang

bhoang

01-11-2018

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

Replies

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

01-11-2018

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

Avatar

Avatar

bhoang

Avatar

bhoang

bhoang

01-11-2018

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

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

06-11-2018

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

07-11-2018

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

Avatar

bhoang

Avatar

bhoang

bhoang

10-12-2018

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

Avatar

bhoang

Avatar

bhoang

bhoang

18-12-2018

Hi friends,

How to setup number of row for the richText?