CKEditor Issue...blank button and error onclick.

[bayouman]

Hello. Issue is the image button is blank and upon clicking I get the attached error. I did find the plugin.js file and created a folder in the CKEditor's plugin section called "jqueryspellchecker" and put it in there. Please help...thank you very much.

I'm using vb.net, VS2010 and my project is using a masterpage. I put the following on my masterpage's head section:

<link href="../Styles/jquery.spellchecker.css" rel="stylesheet" />

<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.spellchecker.js" type="text/javascript"></script>
<script src="../ckeditor/ckeditor.js" type="text/javascript"></script>

<style type="text/css">
    .cke_button__spellchecker_icon {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAACXklEQVQ4y22RzU4rRxCFv+oeM+32jOSFDRIrlA3SABJiiaNIyYK7uq9h3UR5kzwBvEF2+VkgiGSzzgNYVnIH4QULhBhAMOMZ8FBZXNsySRYldZ86p3SqjkwmE1qtFlEUAVAUBQBxHBMEAa+vrzw9PVFVFWEYEkURjUaDqqp4fHyE29tbVBVAAVXVd/8FVlXVf/AsyzDee0REVbVS1UpEFODw8JBVbG1t7R1PVas8zwmstSRJAtAG2N/fnwLUdb3E9vb2pgC7u7tLDGA6nRKICNZagBLAGLPoIyJTvuxQAVRVxfPzc3lzc8NsNsNaixER5qUioosBeZ6vrhACvL290Ww2ieMY7z1BEGDquibLsiU5yzIAyrJc2G1vbm4CYK3FWsv6+jobGxs0m024u7ubu1Snqq7RaKiq0u12V1MoVZXJZPLnagr39/dwdXWFqpZpmi7f82jLlXLABxEpe72eHh8fD1S1vL6+xry8vCwv670HaMdxvLQPtEXkmzAMf+n1emGr1Rr0+/2fgXZRFF+OmKZpGccx3W4XEfnROffdPJVSRL4Ow/DXg4MDF0XR8Ozs7C/gZDwel6pKYIzBWksYhojIB+/9T8aYQkQ+AhJF0W87OzvOOTc4PT39G/hhPB6rtRZjDMEinqIoUFWOjo6GDw8P315eXv4OsLW11XTODQeDwWfg+1WxiGDmEZDnOcAf5+fnl865YafT8Z1Ox3vvhxcXF5+BT/8WA0iapixc1HXN9va2AU6SJPkKYDQapUD//8TvBqgqdV0zm81IksQAJ3NOfzQavQVBgLX2nRjgHzGrYAquuDikAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTEwLTI1VDEyOjQ4OjExKzAyOjAwAaJEMgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0xMC0yNVQxMjo0ODoxMSswMjowMHD//I4AAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC) !important;}
</style>

Here's my config.js:

// Extra plugins
config.extraPlugins = 'jqueryspellchecker';

//CAPs Comm Tool's Custom Toolbars
CKEDITOR.config.toolbar_CT =
[
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
//{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
    { name: 'spellcheck', items: ['jQuerySpellChecker'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: ['Link', 'Unlink'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
//    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
    {name: 'insert', items: ['Table', 'HorizontalRule', 'SpecialChar'] },
{ name: 'tools', items: ['Maximize'] }
];

contentsCss: '../Styles/jquery.spellchecker.css'

CKEDITOR.config.toolbar = 'CT';

[badsyntax]

What is the error you get? Also what browser are you using?

[bayouman]

I'm using IE8 and IE9.
The error is as such: Microsoft JScript runtime error: 'this.editor.commands.jqueryspellchecker' is null or not an object.

The line it stops on is within the create: function "this.editor.commands.jqueryspellchecker.toggleState();"

I just thought of this...I am using multiple CKEditors on one page. Do I need to set things for each? My first assumption is it would work for all since the config worked for all before trying to implement the new spell checker.

[bayouman]

UPDATE: I'm still trying...with no luck. I left this "config.extraPlugins = 'jqueryspellchecker';" in the config.js file and then I commented out the custom toolbar code in the config.js file and added it to the page that has the CKEditor as such:

Here's my config.js file:

CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.dataProcessor.writer.setRules('p',
     {
         indent: false,
         breakBeforeOpen: false,
         breakAfterOpen: false,
         breakBeforeClose: false,
         breakAfterClose: false
     });
});

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;

// Extra plugins
config.extraPlugins = 'jqueryspellchecker';

};

Here is what is within my page:

<script type="text/javascript"> window.onload = function () { var SummFld = { toolbar: [ { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] }, {name: 'spellcheck', items: ['jQuerySpellChecker'] }, '/', { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }, { name: 'links', items: ['Link', 'Unlink'] }, { name: 'colors', items: ['TextColor', 'BGColor'] }, {name: 'insert', items: ['Table', 'HorizontalRule', 'SpecialChar'] }, { name: 'styles', items: ['Font', 'FontSize'] }, { name: 'tools', items: ['Maximize'] } ] } contentsCss: '../Styles/jquery.spellchecker.css' CKEDITOR.replace('<%= SummaryFld.ClientID %>', SummFld); } </script>

<cke:CKEditorControl ID="SummaryFld" BasePath="../ckeditor/" runat="server">/cke:CKEditorControl

It adds the button and when you mouse over it, it says "SpellCheck". When you click on it the same error happens.

The error is as such: Microsoft JScript runtime error: 'this.editor.commands.jqueryspellchecker' is null or not an object.

The line it stops on is within the create: function "this.editor.commands.jqueryspellchecker.toggleState();"

[bayouman]

FYI...the server sends this back to me:

http://localhost:61137/ckeditor/spellchecker?t=C9A85WF

1/14/2013 9:12:19 AM EST
System.Web.HttpException: File does not exist. at System.Web.StaticFileHandler.GetFileInfo(String virtualPathWithPathInfo, String physicalPath, HttpResponse response) at System.Web.StaticFileHandler.ProcessRequestInternal(HttpContext context) at System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

[bayouman]

Hi...I am following up to see if you had any suggestions about what I've posted. Thanks.

[rpringle]

The issue with the missing icon is because the instructions reference the incorrect css class name. The proper class name is actually .cke_button_jqueryspellchecker. That should fix your button not showing up.

The other error sounds like it might be related to not implementing a valid spell checking library on the server side. Check the instructions again, specifically item number 3, for references to the supported libraries.