Question

I am trying to integrate javascriptspellchecker into a web page with ckEditor (note I am using ckeditor version 3.6). I would like to replace the default spellcheck and SCAYT (spell check as you type) plugins with new custom plugins that use javascriptspellcheck.

I have created a plugin following the example from the javascriptspellchecker website but it doesn’t work properly. The javascriptspellchecker taked the id of the textarea and runs a spellcheck on it’s value (or attaches event handlers to spellcheck after input when chosing SCAYT). The problem is, when I alter the text in a ckEditor instance, the hidden textbox doesn’t seem to be updated in the background. This means the plugin I have written only checks the original value of the textarea, and the SCAYT doesn’t work.

My plugin so far:-

(function () {
    //Section 1 : Code to execute when the toolbar button is pressed
    var a = {
        exec: function (editor) {
            $Spelling.SpellCheckInWindow($(editor.element).attr('id'))
        }
    },

    //Section 2 : Create the button and add the functionality to it
    b = 'javascriptspellcheck';
    CKEDITOR.plugins.add(b, {
        init: function (editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("JavaScriptSpellCheck", {
                label: 'Check Spelling',
                icon: this.path + "images/spell.png",
                command: b
            });
        }
    });
})();

Does anyone know if it is possible to make a working plugin? Is there a way to force the editor to update the hidden textarea, or is there another DOM element I can pass to the spellchecker?

Update:

In case it is useful, the SCAYT version of my plugin uses the following execute function

exec: function (editor) {
    $Spelling.SpellCheckAsYouType($(editor.element).attr('id'))
}

Update 2:

I found a soltion for the normal spell check, I can call editor.UpdateElement() before running the spell check and it works! I’m not sure why though, when I inspect the original textarea with firebug the value doesn’t seem to have changed.

New Spellcheck plugin

(function () {
    //Section 1 : Code to execute when the toolbar button is pressed
    var a = {
        exec: function (editor) {
            editor.updateElement();
            $Spelling.SpellCheckInWindow($(editor.element).attr('id'));
        }
    },

    //Section 2 : Create the button and add the functionality to it
    b = 'javascriptspellcheck';
    CKEDITOR.plugins.add(b, {
        init: function (editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("JavaScriptSpellCheck", {
                label: 'Check Spelling',
                icon: this.path + "images/spell.png",
                command: b
            });
        }
    });
})();

I still can’t get SCAYT to work though. I found a ckeditor plugin to catch change events, and tried to call the updateElement() funciton again on every change. This doesn’t work though, can anyone help?

My SCAYT plugin using the ckeditor onchange plugin:

exec: function (editor) {
    editor.on('change', function (e) { this.updateElement(); });
    $Spelling.SpellCheckAsYouType($(editor.element).attr('id'));
}

Answer 1

After contacting support for JavaScriptSpellcheck, they replied saying “SCAYT will not work with any editor as it risks injecting junk HTML into your forms“. So the SCAYT plugin for CK Editor is not possible. As in my question update, the code for a working Spell Check in Window plugin for CK Editor (v3.6) is below:

(function () {
    //Section 1 : Code to execute when the toolbar button is pressed
    var a = {
        exec: function (editor) {
            editor.updateElement();
            $Spelling.SpellCheckInWindow($(editor.element).attr('id'));
        }
    },

    //Section 2 : Create the button and add the functionality to it
    b = 'javascriptspellcheck';
    CKEDITOR.plugins.add(b, {
        init: function (editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("JavaScriptSpellCheck", {
                label: 'Check Spelling',
                icon: this.path + "images/spell.png",
                command: b
            });
        }
    });
})();