Switching from Coral UI3 to Coral UI2 in RTE

[dineshc12261746]

The documentaion below mentions here that, we can switch rte from coralui3 to coralui2 . , However it is suggesting do the changes in libs

Rich Text Editor

As changing anything in /libs might create issues when installing hotfix to SP's . Is there any other way to achieve it ?

[kautuk_sahni]

Excellent share with the community!!

[smacdonald2008]

WHy would you want to use Coral 2 in the RTE when using 6.3?

[benjamin_cheria]

CoralUI3 RTE is broken in 6.3 GA in some instances such as multiple RTEs in the same dialog or multi field. They issues that I was having all seem to be resolved with 6.3.1.2. So if you're having RTE issues in 6.3, install SP1 and CFP2

[smacdonald2008]

The granite.coral multi field works much better than the older granite multi field.

For example, you do not need to write JS or use ACS-Commons. It works OOTB. See this article on granite/Coral MF -- Building Experience Manager Components using Granite/Coral Resource Types

[benjamin_cheria]

Good to see the new Multifield. But, the RTE issue isn't limited to Multi-field though. If you have a tab with multiple RTEs (Title, Description, Subtitle, etc), you run into issues. The main issue I've come across is that when you select text in the textarea, and then try to perform an action from the toolbar, like Bold or Italics, the RTE loses focus and shifts up or down the dialog field.

From what I understand, this only changes Coral 2 RTE, but leaves the rest of the Coral 3 components active. Or am I misunderstanding that?

Also, a Colleague of mine just had this issue today, but noted he didn't see the issue in an environment that had 6.3.0.1, but it is present in 6.3.1.0, but fixed in 6.3.1.2.

[dineshc12261746]

Well , we have few custom plugins in RTE ,these custom plugins are not coming up in RTE editor in 6.3 SP1 as it is by default loading in coral ui 3 , What i have noticed is that the way the coral ui2 rendering and registering icons and classes is different from coral ui3. Hence  at the time of edit (dialog edit) they are coming up as undefined.Therefore we want load coral ui2 to work them the way they are working before.  Is there a way we can makesure onlly coral ui2 RTE is loading on 6.3 without changing anything in libs ?

[hanishb17637780]

dineshc12261746​

> Is there a way we can makesure only coral ui2 RTE is loading on 6.3 without changing anything in libs ?

Thanks for noticing this. Please overlay those nodes under /apps and make those changes. We are working on getting the documentation corrected wrt this asap.

> we have few custom plugins in RTE ,these custom plugins are not coming up in RTE editor in 6.3 SP1 as it is by default loading in coral ui 3

Ideally, your custom plugins, if not using any RTE internal classes, should work fine. As already mentioned, it's recommended to keep using Coral3 RTE.

We can help you identify the root cause here and get it fixed. I suspect, most probably, it would be your custom code that would need to be adjusted. Otherwise, if a bug is identified, we will get it fixed in the product.

Please feel free to provide clear description about your problem including packages (via this forum or via tech@adobe.com)

[dkumar_gobi]

RTE Issues with multiple tabs and multifield are present is 6.3.2.0 release (April-5-2018 ). Switching to RTE to CoralUI2 from CoralUI3 solves most RTE Multifield issues (Link plugin -pathbrowser fails in multifield etc). Follow the exact steps .Overlay the files in your project.

https://helpx.adobe.com/experience-manager/6-3/sites/authoring/using/rich-text-editor.html#Switching...

[hanishb17637780]

dkumar.gobi It is recommended to use Coral3 RTE and not switch to Coral2 RTE.

RTE's behavior is not expected to differ wrt using its Coral2 or Coral3 version as long as any custom code is not touching RTE internals. Also, we have resolved most of the issues in RTE (both Coral2 and Coral3) in latest available CFP for 6.3.

However, If you face any issues while using Coral3 RTE, please report them to us as bugs to get them addressed in the next possible CFP.

[dkumar_gobi]

Thanks, Will raise Adobe Ticket .Below are the RTE issues faced in CoralUi3 6.3.2.0 release without any custom plugins.

RTE in Multifield & Multiple RTE in single dialog tab.

     1) RTE toolbar visually blocks data.Very difficult for authors to select the data

     2) Link plugin-Path browser doesn't have path lookup , forcing authors to manually type link path

[vijayanandvinju]

I am facing an issue with coral3 RTE, after installing 6.3.3. service pack. I have custom style tags added into RTE styles plugin, and the list is quite long. When I open RTE styles dropdown (in either full screen or original view), the UI flickers the vertical scroll bar infinitely and does not let content authors select the dropdown value. This is blocking the content authoring. Do we know this as known issue and have a resolution for this?

[prabhath_tavva]

vijayanandvinju​ -- I am using AEM 6.3.3.1 (SP3 with CFP1) and am facing the same issue. Did you find any fix or workaround ?

smacdonald2008​, kautuksahni aneeta45259594 -- Can you help with this ?

[vijayanandvinju]

I raised a daycare ticket - and the Adobe team acknowledged the issue. This is going to be fixed in the CFP2 estimated to be available in January 2019 release.

Workaround - flickering does not happen on full screen mode of the authoring dialog.

[Arun_Patidar]

If anyone facing problem of switching RTE focus when click on toolbar (plugins), below JS can be added as authoring or extraClientLibs

as workaround.

(function($, $document) {

    "use strict";

    $document.on("dialog-ready", function(e) {

        $("coral-dialog .coral-Dialog-wrapper .coral-Dialog-content .coral-Panel").each(function() {

            var rteItems = $(this).find(".richtext-container");

            var rteTextItems = $(this).find(".richtext-container>div.coral-RichText-editable.coral-Textfield");

            if (rteItems.length > 1) {

                setTimeout(checkRTE, 100);

                function checkRTE() {

                    rteTextItems.attr("contenteditable", "false");

                    rteTextItems.on('click', function() {

                        $(this).attr("contenteditable", "true");

                        rteTextItems.not(this).attr("contenteditable", "false");

                         $(this).focus();

                    });

                }

            }

        });

    });

})($, $(document));