Multiple instances on one page not working

Hello!

I have a page with 5 or more CKEditor instances, all with the Equation Editor. Having multiple instances *almost* works, but not quite.

The very first instance I open works correctly.

The second instance opens, but none of the options show content on hover.

Doing some digging, I found that there were in fact two equation editors loaded, however the second equation editor, on hover, is opening the dropdown image for the first equation editor. Conversely, clicking an option in the first equation editor when I have the second one open selects the option for the second equation editor. So it knows I am using the second equation editor, but the hover-reveal action on the menu options is confused.

Hard to "tell" this situation.

The problem lies in the div field with an ID #EqnEditor, which is created with each Equation Editor instance. When it applies hover and styles, it does this for #EqnEditor, and it finds the first equation editor.

Hopefully this is enough to go on. I am going to try clever scripting to see if I can work around the EqnEditor problem.

Also seems ID tags bar1 and bar2 cause conflicts.

ID tag style_map as well.

The biggest offender appears to be ID tag panel## inside each toolbar element.

Okay, my solution. May not be the best one, but it works for allowing multiple CKEditors + EqnEditors. Comments explain stuff.

var EqnEditors = [];
 
    function ProcessEditors(clickElement) {
 
        // Readd all removed EqnEditors to the DOM.
        for (var i = 0; i < EqnEditors.length; ++i) {
            var editor = EqnEditors[i]
            $(editor.owner).append(editor);
        }
 
        var recur = 0;
 
        function UpdateEditor() {
 
            // Grab the cke dialog that just opened.
            var $visibleEditor = $('[name="CCEquationEditor"]:visible');
 
            recur++;
            if (recur >= 100) {
                alert('Editor did not open.');
                return;
            }
 
            // Also wait for the EqEditor and targetArea to spawn.  Sometimes this all happens too
fast for the initial load.
            if ($visibleEditor.length === 0 || !window.EqEditor || !window.EqEditor.targetArea) {
                setTimeout(UpdateEditor, 10);
                return;
            }
 
            // Remove all non-visible EqnEditors from the DOM.  This hides their image maps,
allowing proper menu selection for the remaining visible editor.
            $('[name="CCEquationEditor"]:not(:visible)').each(
                function () {
                    var $this = $(this);
 
                    // Establish initial array storage of all editors
                    if (EqnEditors.indexOf($this[0]) === -1) {
                        EqnEditors.push($this[0]);
                    }
 
                    $this[0].owner = $this.parent()[0];
                    $this.remove();
                }
            );
 
            // Redirect the input and preview fields.
            window.EqEditor.targetArea.equation_input = $visibleEditor.find('textarea')[0];
            window.EqEditor.targetArea.equation_preview =
$visibleEditor.find('img[id*="CCequ"]')[0];
 
            // If this is a click-in, set the initial values to the clicked image content.
            if (clickElement) {
 
$(window.EqEditor.targetArea.equation_input).val($(clickElement.target).attr('alt'));
                $(window.EqEditor.targetArea.equation_preview).attr('src',
$(clickElement.target).attr('src'));
            }
        };
 
        setTimeout(UpdateEditor, 10);
    };
 
    $(document).on('click', '.editor .cke_button__eqneditor',
        function () {
            // Initialize everything needed for the dblclick action when editing an existing
equation in an editor.
            $(this).parents('.editor').find('iframe.cke_wysiwyg_frame').each(
                function () {
                    var $contents = $(this).contents();
                    $contents.off('dblclick');
                    $contents.on('dblclick', 'img[src*="gif.latex"]', ProcessEditors);
                }
            );
 
            // Go through each editor and do some magic hide-y swap-y stuff.
            ProcessEditors();
        }
    );

Hi,

Thanks for find a solution to your own problem. We address this very problem with a new editor that will be available next year. In the mean time your fix seems appropriate, though heavy handed :)

Will