badsyntax / jquery-spellchecker

[not maintained] A lightweight jQuery plugin that can check the spelling of text within a form field or DOM tree.
http://jquery-spellchecker.badsyntax.co
MIT License
257 stars 113 forks source link

CKEditor Issue...blank button and error onclick. #20

Open bayouman opened 11 years ago

bayouman commented 11 years ago

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 commented 11 years ago

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

bayouman commented 11 years ago

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 commented 11 years ago

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:

/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 commented 11 years ago

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 commented 11 years ago

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

rpringle commented 11 years ago

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.