error: error in [unknown object].fireEvent(): event name: tinymceSetContent error message: Cannot read property 'serialize' of undefined

[kaushik-kumar-roy]

Hi everyone, We are using a magento 2.2.4 version and recently we installed this extension to our site to upgrade the editor to tinymce4. Now we are facing an error message at the category page from admin panel.

Error message

error: error in [unknown object].fireEvent(): event name: tinymceSetContent error message: Cannot read property 'serialize' of undefined

I have however found some related issue with the different error message in github but I was not able to fix this error with their reference.

Error Picture

The error message are coming 6 times. We do have 4 more content editors from the theme. So whenever we click the menu tab this error message pops up. You can see the menu tab from the above picture.

File Browser button missing

I am getting this issue in category edit page only, for product edit page it is working fine.

Files used for debugging

These files include console logs in order to see where the issue is. After some time of debugging i saw that the issue was in the fireEvent() whenever it was calling with the event name tinymceSetContent. For all the tinymceSetContent events the argument lengths are greater than 1 and the async is false so it is going in the else condition and setting the value for the result variable result = this.arrEvents[evtName][i].method(arguments[1]); but if i try to print the variable or if check the typeof() i am getting undefined.

Fire Event method

/**

• Fires the event {eventName}, resulting in all registered handlers to be executed.
• It also collects and returns results of all non-asynchronous handlers
• @param {String} eventName - The name of the event to fire
• @param {Object} [args] - Any object, will be passed into the handler function as the only argument
• @return {Array} */

fireEvent: function (eventName) {

        // debug
        if (eventName == "tinymceSetContent") {
            console.log("fireEvent called => " + eventName);
            console.log(this.arrEvents);
        }

        var evtName = eventName + this.eventPrefix,
            results = [],
            result, len, i, eventArgs, method, eventHandler;

        if (this.arrEvents[evtName] != null) {
            len = this.arrEvents[evtName].length; //optimization

            for (i = 0; i < len; i++) {
                /* eslint-disable max-depth */

                // debug
                if (eventName == "tinymceSetContent") {
                    console.log("i => " + i);
                    console.log(arguments);
                }

                try {

                    // debug
                    if (eventName == "tinymceSetContent") {
                        console.log("arguments lenght => " + arguments.length);
                        console.log("arrEvents evtName i asynch => " + this.arrEvents[evtName][i].asynch);
                    }

                    if (arguments.length > 1) {
                        if (this.arrEvents[evtName][i].asynch) {

                            // debug
                            if (eventName == "tinymceSetContent") {
                                console.log("inside arrEvents evtName i asynch");
                            };

                            eventArgs = arguments[1];
                            method = this.arrEvents[evtName][i].method.bind(this);
                            setTimeout(function () { //eslint-disable-line no-loop-func
                                method(eventArgs);
                            }, 10);
                        } else {

                            // debug
                            if (eventName == "tinymceSetContent") {
                                console.log("else : inside arrEvents evtName ");
                            };

                            result = this.arrEvents[evtName][i].method(arguments[1]);

                            // debug
                            if (eventName == "tinymceSetContent") {
                                console.log("else : arrEvents evtName i asynch ")
                                console.log(typeof(result));

                            };
                        }
                    } else {

                        // debug
                        if (eventName == "tinymceSetContent") {
                            console.log("arguments length < 1");
                        };

                        if (this.arrEvents[evtName][i].asynch) { //eslint-disable-line no-lonely-if

                            //debug
                            if (eventName == "tinymceSetContent") {
                                console.log("inside if");
                            };

                            eventHandler = this.arrEvents[evtName][i].method;
                            setTimeout(eventHandler, 1);

                        } else if (
                            this.arrEvents &&
                            this.arrEvents[evtName] &&
                            this.arrEvents[evtName][i] &&
                            this.arrEvents[evtName][i].method
                        ) {

                            // debug
                            if (eventName == "tinymceSetContent") {
                                console.log("inside else");
                            };

                            result = this.arrEvents[evtName][i].method();
                        }
                    }
                    results.push(result);

                    // debug
                    if (eventName == "tinymceSetContent") {
                        console.log("result pushed => " + eventName);
                    }

                }
                catch (e) {

                    // debug
                    console.log("error => " + eventName + "at i => " + i);

                    if (this.id) {
                        alert({
                            content: 'error: error in ' + this.id + '.fireEvent():\n\nevent name: ' +
                            eventName + '\n\nerror message: ' + e.message
                        });
                    } else {
                        alert({
                            content: 'error: error in [unknown object].fireEvent():\n\nevent name: ' +
                            eventName + '\n\nerror message: ' + e.message
                        });
                    }
                }

                /* eslint-enable max-depth */
            }
        }

        if (eventName == "tinymceSetContent") {
            console.log("final result array ");
            console.log(result);
        }

        return results;
    }`

• /vendor/pavelleonidov/module-tinymce4/view/base/web/mage/adminhtml/wysiwyg/tiny_mce/setup.js
• /lib/web/mage/adminhtml/events.js

events.js.txt setup.js.txt

Though while installing this extension from composer it removed a module name abraham_twitteroauth

after this i again installed the abraham_twitteroauth module via composer.

Please Help me on how to fix this issue. Thank you.

[4ctobias]

Same here

[backendorf]

Same problem

[backendorf]

I managed to overcome both problems by disabling the editor by default in Stores -> Settings -> General -> Content management -> Enable WYSIWYG Editor