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

SOLVED

RTE doesn't work when placed in a page dialog?

alexr21
Level 4
Level 4

I have created a static template for some product pages. Simplified for debugging it looks like this at page creation time:

1418308_pastedImage_0.png

However when the Product Description field is replaced by a richtext, the input collapses to this:

1418316_pastedImage_1.png

What could cause this?

1 Accepted Solution
praveenjain
Correct answer by
Level 4
Level 4

Root Cause : The div created for RTE filed during page creation does not contain contenteditable="true" but contains when Edited from Page properties.

<div class="coral-RichText-editable coral-Form-field coral-Textfield coral-Textfield--multiline coral-RichText is-edited webkit chrome" data-config-path="/mnt/override/apps/gwc/watchman/components/page/localePage/_cq_dialog/content/items/tabs/items/ctc/items/column/items/ctcicontext.infinity.json" data-use-fixed-inline-toolbar="true" data-custom-start="null" data-editor-type="text" data-external-style-sheets="" contenteditable="true" style="outline-style: none;"><p>Call Now</p></div>

Fix:

If you need to make it editable during page creation

You need to write js on foundation-contentloaded (component clientlib) $(document).on("foundation-contentloaded",function(){}

and add contenteditable="true" in div. It will starting working fine.

View solution in original post

0 Replies
praveenjain
Level 4
Level 4

To answer your question its a expected behavior as I mentioned in point 3.

Also looks like toolbar is missing, hence you can refer point 1&2 as required.

1) To get toolbar in RTE, you need to add below property in cq:dialog

property name: extraClientlibs

property value: cq.authoring.dialog.rte.coralui2

2) Toolbar will be displayed on top of this filed so you can add below css in author clientlibs to separate filed from toolbar

.coral-RichText-ui{ margin-bottom:42px;}

3) Normaly RTE will be shown in single line unless you press enter.

ie as your type value in RTE it will keep increasing as shown in below

1418368_pastedImage_0.png

alexr21
Level 4
Level 4

jainpraveen12​, it is not possible to type anything into the single line, it does not accept input focus. So #3 cannot be reproduced.

Why can't I make it behave the same in Page Properties as it does in a Component Dialog?

alexr21
Level 4
Level 4

I also tried #1 and #2 and it made no difference.

praveenjain
Level 4
Level 4

You should add useFixedInlineToolbar property in RTE field as true, as shown below then only inline RTE editing will be enabled.

Component Dialog RTE works in full screen mode, here in Template we are doing inline editing in touch UI , hence these changes needs to be made.

If it still doesn't work, please provide the dialog xml, i can check if anything missing.

Also If you are using TouchUI Laptop/System, please disabled and try again.

1419299_pastedImage_0.png

smacdonald2008
Level 10
Level 10

WHy do you need a RTE in a page dialog. A RTE is typically used to get rich text to display in web sites. For Page dialogs, the default types should suffice in gather information about the page.

alexr21
Level 4
Level 4

smacdonald2008 It's for a description field which we need to reference in other pages. Think of a page containing a really long article, and then having a requirement to create a "top articles of the month" page where you want to pull in just the titles and summaries of those original articles.

alexr21
Level 4
Level 4

jainpraveen12​ the useFixedInlineToolbar=true was already in use, so that's not the cause of this issue.

Here's the dialog xml:

https://drive.google.com/file/d/17c5WDoa17CCLCpVfolcrOj1-M2MS1obi/view?usp=sharing

smacdonald2008
Level 10
Level 10

I checked with our internal team. Here is an article that shows use of the RTE in a non-component.

This one’s in asset metadata editor

http://experience-aem.blogspot.in/2017/04/aem-62-touch-ui-rich-text-rte-in-asset-metadata-editor.htm...

alexr21
Level 4
Level 4

As a temporary work-around, we've determined that the RTE works fine if you save (Create Page) and then re-open the Page Properties in edit mode.

praveenjain
Correct answer by
Level 4
Level 4

Root Cause : The div created for RTE filed during page creation does not contain contenteditable="true" but contains when Edited from Page properties.

<div class="coral-RichText-editable coral-Form-field coral-Textfield coral-Textfield--multiline coral-RichText is-edited webkit chrome" data-config-path="/mnt/override/apps/gwc/watchman/components/page/localePage/_cq_dialog/content/items/tabs/items/ctc/items/column/items/ctcicontext.infinity.json" data-use-fixed-inline-toolbar="true" data-custom-start="null" data-editor-type="text" data-external-style-sheets="" contenteditable="true" style="outline-style: none;"><p>Call Now</p></div>

Fix:

If you need to make it editable during page creation

You need to write js on foundation-contentloaded (component clientlib) $(document).on("foundation-contentloaded",function(){}

and add contenteditable="true" in div. It will starting working fine.

View solution in original post

alexr21
Level 4
Level 4

Thanks jainpraveen12​. I will try this shortly. Do you have any idea why Multifield also doesn't work on Page Properties? Could it be a similar missing class?

praveenjain
Level 4
Level 4

alexr2​ No, Multifield works fine in touch UI during page creation process.

Issue with your attached dialog is you are using "foundation/form/fieldset" inside "coral/foundation/form/multifield", which is causing problem. Instead used all coral fields, it will work fine.

Use: granite/ui/components/coral/foundation/form/fieldset

alexr21
Level 4
Level 4

Per Adobe Daycare "RTE on Page Creation is not and OOTB AEM feature and not supported OOTB" and so jainpraveen12​'s answer is the correct one, although it is only a partial fix (the toolbar still won't display).