RTE doesn't work when placed in a page dialog? | Community
Skip to main content
alexr21
Level 3
Feb 14, 2018 3:20 AM UTC
Solved

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

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
praveenjainAccepted solution
Level 3
Feb 16, 2018 7:42 AM UTC

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 reply

13 replies

Show previous replies
alexr21Author
Level 3
Feb 15, 2018 12:25 AM UTC

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

Translate
    alexr21Author
    Level 3
    Feb 15, 2018 12:18 AM UTC

    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?

    Translate
      praveenjain
      Level 3
      Feb 14, 2018 8:45 AM UTC

      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

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...