Search code examples
jqueryasp.netjquery-uickeditorjquery-ui-dialog

CKEditor with jQuery UI Dialog, spell check and buttons not working on second click


I'm using CKEditor 4 to turn a <textarea> into a WYSIWYG editor inside a jQuery UI Dialog.

I have 3 issues which I'm assuming are related:

  • The SCAYT feature isn't working. You can click the spell check dropdown and click "Enable SCAYT" but it doesn't do anything.
  • If you click the "Enable SCAYT" option twice, you'll get JS errors saying the version of SCAYT is newer than the application version and that SCAYT is undefined:

SCAYT Error

  • If you close the dialog and try to re-open it, the JS error repeats itself and most of the other buttons stop working:

Editor Buttons Disabled

Any help would be great. Here's the code I'm using:

function OpenDialog(modalID, w, h) {
    $("#" + modalID).css("display", "block");

    $("#" + modalID).dialog({
        draggable: false,
        height: h,
        width: w,
        resizable: false,
        modal: true,
        appendTo: "form",
        buttons: [
            {
                text: 'Save',
                class: "saveicon",
                click: function () {
                    //Save Stuff
                }
            }
        ]
    }).bind('dialogclose', function (event, ui) {
        //toggles the editor controls
        editor = CKEDITOR.instances['<%=txtEditor.ClientID %>'];
        if (editor) {
            editor.updateElement();
            editor.destroy();
        }
    });
    $(".saveicon").prepend('<span class="glyphicon glyphicon-floppy-disk"></span> ');
}

Solution

  • My problem was a combination of issues, all on my end:

    • The buttons graying out was due to a cache problem. I cleared my cache and the problem was resolved.

    • The SCAYT issue was because my company's firewall was blocking the call to the SCAYT web service.