Question Re: RichTextEditor binding issue in Technology Q&A

RichTextEditor binding issue

muhsin_panakkal — Thu, 22 Aug 2019 06:17:04 GMT

Hai Experts,

I am using Richtext Editor in one of my SAPUI5 app, while loading the app value is binding properly, but sometime the value is not binding(rare scenarios) since the odata is returning the required data, Is anybody face the same issue..? If Yes can anybody assist to resolve the same.

Thanks,

Muhsin

Re: RichTextEditor binding issue

M_Zimmermann — Fri, 08 Nov 2019 10:33:26 GMT

I also have problems with the RichTextEditor in the newer SAPUI5 versions (>= 1.60.0).

I have a Master-Detail application. In the detail view is the RichTextEditor. Depending on which item has been selected in the master view the `value` of the RichTextEditor changes via a property binding.

If I quickly switch between two items and then back to the original item in the master view, then the RichTextEditor just disappears...

This issue is only happening since SAPUI5 version 1.60.0. As as workaround I'm now sticking to the maintenance release 1.52.

Re: RichTextEditor binding issue

artioms — Wed, 05 Aug 2020 09:28:40 GMT

Hi Manuel,

Have you been able to find a solution for your problem? I'm on SAPUI5 version "1.71.0" and facing exactly the same issue as you've described. In the console log I don't see any errors related to the RichTextEditor either.

Thanks,

Artiom

Re: RichTextEditor binding issue

M_Zimmermann — Tue, 01 Sep 2020 07:52:04 GMT

artiom21 Yes, I found a workaround.

The RichTextEditor uses the TinyMCE library internally. Since SAPUI5 1.60 a newer version of TinyMCE (4.7.13) is used which is causing this problem. The version of TinyMCE (4.5.7) used in SAPUI5 1.52 works fine. For this reason I created a custom control which is using the older version of TinyMCE:

CustomRichTextEditor.js:

sap.ui.define([
    "sap/ui/richtexteditor/RichTextEditor",
    "sap/ui/dom/includeScript"
], function (RichTextEditor, includeScript) {
    "use strict";

    RichTextEditor.loadTinyMCE = function () {
        var sLocation = "https://sapui5.hana.ondemand.com/1.52.41/resources/sap/ui/richtexteditor/js/tiny_mce4/tinymce.min.js";

        if (sLocation) {
            var sRealLocation = sLocation,
                oScriptElement = document.querySelector("#sapui5-tinyMCE"),
                sLoadedLocation = oScriptElement ? oScriptElement.getAttribute("src") : "";


            if (sRealLocation !== sLoadedLocation && RichTextEditor._iCountInstances === 1) {
                delete window.tinymce;
                delete window.TinyMCE;
                RichTextEditor.pLoadTinyMCE = null;
            }

            if (!RichTextEditor.pLoadTinyMCE) {
                RichTextEditor.pLoadTinyMCE = new Promise(function (fnResolve, fnReject) {
                    includeScript(sRealLocation, "sapui5-tinyMCE", fnResolve, fnReject);
                });
            }
        }
        return RichTextEditor.pLoadTinyMCE;
    };

    return RichTextEditor;
});

CustomRichTextEditorRenderer.js

sap.ui.define([
    "sap/ui/richtexteditor/RichTextEditorRenderer"
], function (RichTextEditorRenderer) {
    "use strict";

    return RichTextEditorRenderer;
});

Essentially I only override one method which specifies the version of TinyMCE. Currently I use this custom control in SAPUI5 1.60 which works fine but have not tested it for newer versions.

I hope that helps you 🙂