How To Integrate ieSpell Into CKEditor 3.x?

My customers do not want to pay for a license for SpellChecker.net and are also not happy with their data being sent to a 3rd party site.

They are currently using ieSpell on FCKEditor, and the best solution for me would be to integrate this into CKEditor 3.x for them instead of SpellChecker.

I have changed the settings to activate the browser spell checker, but what I don't have is a Button on the toolbar for them to press when they want to do a spell check. They will never be satisfied with having to use the option from the browser toolbar.

I tried looking at a few plugins to see how I might do this, but although getting the icon defined looks fairly straightforward, I am totally confused as to how to implement the call to ieSpell.

Can anyone help point me in the right direction, or suggest a plugin I can use as an example please.

Thu, 05/24/2012 - 12:14

sebstefanov

Joined: 03/02/2012

Posts: 1329

Re: How To Integrate ieSpell Into CKEditor 3.x?

Here's a link to our plugin tutorial section: http://docs.cksource.com/CKEditor_3.x/Tutorials

Documentation on it will be expanded after the release of CKEditor v4. In the meantime, you can try Alfonso's new toolbar icon plugin: viewtopic.php?f=18&t=25546

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Thu, 05/24/2012 - 13:04

poddys

Joined: 21/09/2010

Posts: 14

Re: How To Integrate ieSpell Into CKEditor 3.x?

Thanks, let me take a look and see if I can get my head around the code requirements.

Getting the button should be easy, getting it to work might take a bit of trial and error - hopefully not too many errors... If I get it working I will be happy to share the plugin.

Mon, 05/28/2012 - 17:58

poddys

Joined: 21/09/2010

Posts: 14

Re: How To Integrate ieSpell Into CKEditor 3.x?

Well I got the call to execute finally, by moving the Javascript for ieSpell into the same folder as my plugin.

It now calls the ieSpell function that is supposed to perform the spelling, but fails to find ieSpell and puts up a popup which asks me to download it.

I know ieSpell is installed correctly because I can call it from the MSIE Toolbar using the ieSpell button.

I tried debugging the ieSpell function, but I am not getting anywhere. Of course it would be easier in Firefox with Firebug, but ieSpell will only work with MSIE

Below is my plugin.
I am assuming that the "node" is the "Id" of the Textarea which I have in the editor.
The exception I am getting is "Type Mismatch".
Any thoughts please?

CKEDITOR.plugins.add('iespell', {
   init: function (editor) 
   {
      var pluginName = 'iespell';
      editor.addCommand(pluginName, {
         exec: function (editor) 
         {
//            var sel = editor.getSelection();
//            var sel = editor.getData();
//            var sel = editor.element.getName();
            var sel = editor.name;
//            void CheckDocumentNode(sel);
            checknodespelling(sel);
         }
            

      });
      
      editor.ui.addButton('ieSpell', {
         label: 'ieSpell Check',
         icon: this.path + 'images/iespell.gif',
         command: pluginName
      });
   }
});

Wed, 05/30/2012 - 13:33

poddys

Joined: 21/09/2010

Posts: 14

Re: How To Integrate ieSpell Into CKEditor 3.x?

My call to ieSpell now functions, however once in ieSpell it gives an error, and fro the life of me I cannot see what it is. Hoping someone can point out what is hopefully fairly obvious and help me on my way. My Javascript is fairly limited, and I haven't dealt much with ActiveX Controls at all. ieSpell hasn't been updated in 3 years and I am unlikely to get support from there unfortunately.

What I have in my plugin is the following:

CKEDITOR.plugins.add('iespell', {
   init: function (editor) 
   {
      var pluginName = 'iespell';
      editor.addCommand(pluginName, {
         exec: function (editor) 
         {
            var sel = editor.name;
//            checknodespelling(sel);
            var tmpis = new ActiveXObject("ieSpell.ieSpellExtension");
            tmpis.CheckDocumentNode(sel);
         }
            

      });
      
      editor.ui.addButton('ieSpell', {
         label: 'ieSpell Check',
         icon: this.path + 'images/iespell.gif',
         command: pluginName
      });
   }
});