Ext.ux.form.HtmlEditor.JSpell

[jheid]

I needed a spell checker for the HTML editor component (for IE 6 indeed). So I used JSpell (look here to get an idea: http://www.jspell.com/tinymcespellchecker.html) and wrote a plugin for it. Here it is:

Ext.namespace ('Ext.ux.form.HtmlEditor');

Ext.ux.form.HtmlEditor.JSpell = function (config) {
 Ext.apply(this, config);
 Ext.ux.form.HtmlEditor.JSpell.superclass.constructor.call (this);
 };
Ext.extend (Ext.ux.form.HtmlEditor.JSpell, Ext.util.Observable, {
 jspellServerPath: '/abc',
 jspellImagePath: 'images/jspell/',
 scriptPath: 'js/jspellEvolution.js',
 // additional config elements
 jspellConfig: {},

 init: function (cmp) {
  for (var x in this.jspellConfig)
      window[x] = this.jspellConfig[x];
  window.jspellServerPath = this.jspellServerPath;
  window.jspellImagePath = this.jspellImagePath;

  var head = document.getElementsByTagName ('head')[0];
  var script = document.createElement ('script');
  script.type = 'text/javascript';
  script.src = this.scriptPath;
  head.appendChild (script);  

  cmp.on ('afterrender', function () {
   cmp.on ('sync', function (cmp, html) {
    this.el.dom.value = html.replace (/<span[^>]+class="?j3"?[^>]*>(.*?)<\/span>/gi, '$1'); 
    });
   var initSpellchecker = function () {
    if (typeof jspellInit == 'undefined' || !cmp.iframe.contentWindow.document.body) {
       initSpellchecker.defer (100);
       } else {
              setTimeout (function () {
               cmp.iframe.id = cmp.iframe.id || Ext.id ();
               window.getSpellCheckArray = function () {              
                return [[ document, cmp.iframe.id ]];
                };
               jspellInit ();
               }, 10);
              }
    };
   initSpellchecker ();
   }, this);
 }
}); 

You can use it wth a HTMLEditorField like this:

new Ext.form.HtmlEditor ({
 plugins: [
  new Ext.ux.form.HtmlEditor.JSpell ({
   jspellConfig: {
    jspellRightClick: true
    }
   })
 }); 

Currently it checks it as you type (like Firefox or Word does). It would be easy to add a button for manual spell checking.

[renaud.lemortellec]

When i use your plugin, i have a syntax error in jspellEvolution.js (line 376)
Any idea ?

[jheid]

What's in that line?

[renaud.lemortellec]

jspellEvolution.js:376

eval(J6q.responseText);

J6q.responseText contains a Tomcat error page. I think i've not correctly installed JSpell or ur plugin...

do you have an example of configuration ?

scriptPath => jspellEvolution.js url
jspellServerPath => ?
jspellImagePath => ?

[renaud.lemortellec]

ok i understand

JSpell is temporarly installed here : http://localhost:8080/jspellEvolution/
so i've done this :

jspellServerPath: 'http://localhost:8080/jspellEvolution/abc',
jspellImagePath: 'http://localhost:8080/jspellEvolution/jspellimages/',
scriptPath: 'http://localhost:8080/jspellEvolution/jspellEvolution.js',

there is no syntax error but nothing appends (no correction) when i type texte in my htmleditor

[renaud.lemortellec]

setTimeout (function () {
                        cmp.iframe.id = cmp.iframe.id || Ext.id ();
                        window.getSpellCheckArray = function () {
                            alert('getSpellCheckArray');
                            return [[ document, cmp.iframe.id ]];
                        };
                        alert('jspellInit: ' + cmp.iframe.id);
                        jspellInit();
                    }, 10);

alert('jspellInit: ' + cmp.iframe.id) is called but alert('getSpellCheckArray') is never called.

[Shalini_DOE]

The same code is not working. Has anyone got the jspell to work. I am using .NET MVC 4 with extjs library as my UI