I wrote this code to initialize an editor, but my code behaves differently in Firefox browser.

This is part of my code:

window.hexbit.widget = {
.
.
.
initEditorOn: function (editorId, mediaButtons = false) {
            // check id is real
            if (!document.getElementById(editorId) ||
                editorId.endsWith('__i__')) {
                return;
            }

            // The user has disabled TinyMCE.
            if (typeof window.tinyMCE === 'undefined') {
                wp.editor.initialize(editorId, {
                    quicktags: true
                });
                return;
            }

            if (window.tinyMCE.get(editorId) !== null) {
                console.log('window.tinyMCE.get(editorId) !== null', window.tinyMCE.get(editorId))
                // reinitialize editor
                window.tinyMCE.get(editorId).on('remove', function () {
                    console.log('removed');
                    window.setTimeout(function () {
                        window.hexbit.widget.initEditorOn(editorId, mediaButtons);
                    }, 50);
                });
                wp.editor.remove(editorId);
                return
            }

            //init tinyMCE
            window.wp.editor.initialize(editorId, {
                mediaButtons: mediaButtons,
                tinymce: {
                    forced_root_block: false,
                    remove_linebreaks: false,
                    remove_trailing_brs: false,
                    verify_html: false,
                    mode: 'html',
                    textarea_rows: 4,
                    entity_encoding: "raw",
                    init_instance_callback: function (editor) {
                        editor.getBody().style.backgroundColor = "#F4FFFF";
                        // rebuild editor if iframe destroyed
                        jQuery(editor.getWin()).on('unload', function () {
                            console.log('#########HERE############ ')
                            window.hexbit.widget.initEditorOn(editorId, mediaButtons);
                        });
                    },
                    setup: function (editor) {
                        // important to save in live edit
                        editor.on('keyup execcommand paste', window.tinyMCE.util.Delay.debounce(function (e) {
                            window.tinyMCE.triggerSave();
                        }, 1000));
                        editor.on('keyup execcommand paste', window.tinyMCE.util.Delay.debounce(function (e) {
                            $('body #'   editorId).trigger('change');
                        }, 3000));
                    },
            });
        },
.
.
.
}

The problem is: Although this code works well in Chrome, but in Firefox when this jQuery(editor.getWin()).on('unload', function () {} callback called,my debug log console.log('#########HERE############ ') prints out as expected, but this line window.hexbit.widget.initEditorOn(editorId, mediaButtons); is not called! I could't find a reason for this bug, please explain if anyone knows. Thanks...

CodePudding user response：

I fixed this with differing by using setTimeOut with a delay of 0,also underscore js has a function _.defer(function, *arguments) Defers invoking the function until the current call stack has cleared, similar to using setTimeout with a delay of 0. it's useful for performing expensive jobs or HTML rendering in chunks without blocking the UI thread from updating.