Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

issue with OOTB Rich Text Editor (RTE) in 6.3

alexr21
Level 4
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
alexr21
Correct answer by
Level 4
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

0 Replies
kautuk_sahni
Employee
Employee

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

alexr21
Level 4
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.

edubey
Level 10
Level 10

Possible to share screenshot?

Can you reproduce this in 6.3 we retail OOTB component?

alexr21
Level 4
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

kautuk_sahni
Employee
Employee

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

alexr21
Correct answer by
Level 4
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.

davidl21
Level 1
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.

alexr21
Level 4
Level 4

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

davidl21
Level 1
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;

    }