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