Expand my Community achievements bar.

SOLVED

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

Avatar

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

Avatar

Correct answer by
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

13 Replies

Avatar

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

Avatar

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?

Avatar

Level 4

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

Avatar

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

Avatar

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.

Avatar

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.

Avatar

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

Avatar

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...

Avatar

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.

Avatar

Correct answer by
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.

Avatar

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?

Avatar

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

Avatar

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).