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

[alexr21]

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

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

What could cause this?

[praveenjain]

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

[alexr21]

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]

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

[praveenjain]

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.

[smacdonald2008]

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]

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]

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]

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]

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 · Accepted solution]

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.

[alexr21]

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]

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]

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