RTE doesn't work when placed in a page dialog? | Community
Skip to main content
A
alexr21
Level 3
February 14, 2018
Solved

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

  • February 14, 2018
  • 13 replies
  • 10256 views

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.
Best answer by praveenjain

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.

13 replies

P
praveenjain
Level 3
February 14, 2018

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

    A
    alexr21Author
    Level 3
    February 15, 2018

    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?

      A
      alexr21Author
      Level 3
      February 15, 2018

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

        P
        praveenjain
        Level 3
        February 15, 2018

        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
          smacdonald2008
          Level 10
          February 15, 2018

          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.

            A
            alexr21Author
            Level 3
            February 15, 2018

            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.

              A
              alexr21Author
              Level 3
              February 15, 2018

              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
                smacdonald2008
                Level 10
                February 15, 2018

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

                  A
                  alexr21Author
                  Level 3
                  February 15, 2018

                  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.

                    P
                    praveenjainAccepted solution
                    Level 3
                    February 16, 2018

                    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.

                      Show more replies
                      Terms & ConditionsAccessibility statement

                      Loading footer...