Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

issue with OOTB Rich Text Editor (RTE) in 6.3

Avatar

Level 4

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?

1 Accepted Solution

Avatar

Correct answer by
Level 4

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.

View solution in original post

9 Replies

Avatar

Administrator

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

Avatar

Level 4

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.

Avatar

Level 10

Possible to share screenshot?

Can you reproduce this in 6.3 we retail OOTB component?

Avatar

Level 4

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:

chrome_2018-02-01_19-21-52.png

After resize/restore:

chrome_2018-02-01_19-24-27.png

Avatar

Administrator

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

Avatar

Correct answer by
Level 4

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.

Avatar

Level 1

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.

Avatar

Level 4

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

Avatar

Level 1

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;

    }