issue with OOTB Rich Text Editor (RTE) in 6.3 | Community
Skip to main content
A
alexr21
Level 3
February 1, 2018
Solved

issue with OOTB Rich Text Editor (RTE) in 6.3

  • February 1, 2018
  • 9 replies
  • 5514 views

We have a simple component using the RTE in a field on 6.3.

The RTE does not function correctly. Steps to reproduce issue:

• Open the dialog for the component. Notice that default RTE plugin options ( like bold, italics, indentation, etc…) do not appear above area to input text.

• Toggle dialog to full screen.

• Toggle once more to normal dialog size

• The options can now be seen ( but they will disappear again if you click somewhere else in the dialog)

We are using the basic RTE with no customizations.

Is anybody else seeing this? What's the solution or workaround?

    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 alexr21

    kautuksahni​ I reproduced the problem using the package from this article: Configuring Experience Manager Rich Text Editor Plugins in a Touch UI Component Dialog

    My additional testing indicates this problem only occurs in touchscreen laptops using a touchscreen API enabled browser. My laptop has a touchscreen, and the RTE works fine if I use IE11, which is the only browser I have that lacks the touchscreen API.

    9 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    February 1, 2018

    This is Expected. Since, a dialog can contain multiple RTE, at a time, only one RTE's toolbar should be visible. Hence, it is decided to show on the toolbar on click inside it.

    Reference:- AEM 6.3 richtext

    Kautuk Sahni
    A
    alexr21Author
    Level 3
    February 1, 2018

    In our case, the RTE toolbar does not appear after clicking inside it.

    In fact, it's just the opposite: the toolbar disappears when you click inside the RTE.

    The RTE functionality is completely unusable.

    edubey
    edubey
    Level 10
    February 1, 2018

    Possible to share screenshot?

    Can you reproduce this in 6.3 we retail OOTB component?

    A
    alexr21Author
    Level 3
    February 2, 2018

    Screenshot below shows before and after maximizing/restoring the window.

    I'm not aware of any component in OOTB We.Retail that has an embedded RTE, there is only a stand-alone Text component which is a different use case.

    After clicking in editor:

    After resize/restore:

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    February 2, 2018

    Can you use the package provided in this article:- Configuring the Adobe Experience Manager Touch UI RTE for in-line editor

    And try it on fresh instance. You may not need to go to full screen mode here.

    -Kautuk

    Kautuk Sahni
    A
    alexr21AuthorAccepted solution
    Level 3
    February 13, 2018

    kautuksahni​ I reproduced the problem using the package from this article: Configuring Experience Manager Rich Text Editor Plugins in a Touch UI Component Dialog

    My additional testing indicates this problem only occurs in touchscreen laptops using a touchscreen API enabled browser. My laptop has a touchscreen, and the RTE works fine if I use IE11, which is the only browser I have that lacks the touchscreen API.

      davidl21
      davidl21
      March 15, 2018

      Hi. I see that the last post was marked as the correct answer, but it only seems to confirm that there is a problem with the rich text component on certain devices. Is there any fix for this? I'm experiencing the same issue using a Lenovo Thinkpad T470 (which has a touchscreen) and can confirm that the component works fine in IE, but breaks in Chrome and Firefox.

        A
        alexr21Author
        Level 3
        March 15, 2018

        I contacted Adobe support. The only other work-around besides using IE11, is to disable the touchscreen functionality in newer browsers.

          davidl21
          davidl21
          March 16, 2018

          Thanks for letting me know. I came up with a potential fix, although I haven't done enough testing yet to say that it doesn't break anything else. I should also mention that I'm still on AEM 6.2.

          The issue stems from touch events being handled in a way that would work on mobile devices but not laptops. I found that I was able to prevent coral from classifying laptops as touch-enabled (and thus preventing the handlers from being applied) by making the following changes:

          Copy the file /etc/clientlibs/granite/coralui2/js/coral.js to the same directory. Name the copy coral-modified.js (just to keep the original as a backup)

          Modify line 1461 in /etc/clientlibs/granite/coralui2/js/coral-modified.js from

          return 'ontouchstart' in window;

          to

          return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in window;

          In /etc/clientlibs/granite/coralui2/js.txt, change coral.js to coral-modified.js

          The end result seems to work well on my laptop and mobile phone.

          If you don't want to mess with the coral js, you can also just add this somewhere on the page after the coralui2.js code runs (in a dialog ready listener for example):

               if(CUI.util.isTouch && !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){

                    CUI.util.isTouch = false;

              }

            Terms & ConditionsAccessibility statement

            Loading footer...