SpellCheck

Présentation

SpellCheck est une classe permettant d’intégrer un correcteur orthographique dans vos pages.
Il fonctionne aussi bien avec des inputs html standard (input, textarea) qu’avec des éditeurs basés sur des iframes (dijit.form.Textarea, dijit.Editor, etc…)

Instancier la classe

var spell=new dojox.widget.SpellCheck({
	editor:djEditor,
	innerDocument:djEditor.document,
	setContent:dojo.hitch(djEditor,djEditor.setValue),
	getContent:dojo.hitch(djEditor,djEditor.getValue),
	aspell:"spellcheck.php",
	textarea:dojo.byId("TextArea"),
	contextualMenuCoordsCorrection:{
		l:0,
		t:25//editor toolbar height
	}
});
  • la Propriété « editor » représente l’objet qui va recevoir le correcteur (objet uniquement de type iframe)
  • la Propriété « innerDocument » pointe vert l’objet document contenu par l’iframe de l’éditeur
  • la Propriété « setContent » est la méthode qui va être utilisée par le correcteur pour mettre à jour le contenu
  • la Propriété « getContent » est la méthode qui va être utilisée par le correcteur pour lire le contenu
  • la Propriété « aspell » est le chemin vers le fichier (php ou autre) qui va être utilisé comme passerelle vers le binaire d’aspell
  • la Propriété « textarea » permet de lier le correcteur à une textarea (ou à un input text)
  • la Propriété « contextualMenuCoordsCorrection » est un objet permettant de corrigé la position du menu contextuel. Par exemple, si votre éditeur à une toolbar de 20px de haut, il faudra mettre {t:20} afin que le menu contextuel ne soit pas éloigné de 20px de la position voulu.

Démarrer et arrêter le correcteur

La méthode start() permet de lancer le correcteur. Si elle contient « true » en paramètre, le correcteur sera dans le textarea, sinon il sera dans l’iframe.
La méthode stop() arrête celui-ci.
La propriété « isInProgress » de l’objet permet de savoir si le correcteur est actif ou inactif.

Passerelle de communication avec aspell

Pour communiquer avec aspell, vous pouvez utiliser tout type de langage serveur, à condition de respecter le format de sortie.
Dans l’exemple c’est php qui est utilisé.
Celui-ci appelle aspell et transforme le retour en json.
Si vous voulez créer votre propre passerelle, voici le format de sortie à respecter :

{response:[{ 
		mot :"tun", 
		offset:8, 
		length:3, 
		suggestion:["tune","tub","tu","un","tus","Sun","ton","tua","tue","tuf","tut","tué","tût","tan","d'un","t'en","l'un"]
	},{ 
		mot :"tesst", 
		offset:12, 
		length:5, 
		suggestion:["tests","test","t'est","testa","teste","testé","est","lests","d'est","lest","t'estu","t'eusse","t'eut","t'eût","c'est","l'est","m'est","n'est","s'est"]
	}
]}

Aspell vous retourne ceci :

ceci est tun tesst
*
*
& tun 15 9: tune, tub, tu, un, tus, Sun, ton, tua, tue, tuf, tut, tué, tût, d'un, l'un
& tesst 19 13: tests, test, t'est, testa, teste, testé, est, lests, d'est, lest, t'es-tu, t'eusse, t'eut, t'eût, c'est, l'est, m'est, n'est, s'est

Seule les lignes commençant par « & » doivent être traitées.
Dans le json:

  • la propriété « mot » est le mot entre « & » et le 1er chiffre.
  • la propriété « offset » est le 2eme nombre (le 1er est le nombre de suggestion mais il n’est pas utilisé).
  • la propriété « length » est la longueur du mot placé dans « mot ».
  • la propriété « suggestion » est la liste des suggestions convertie en tableau.

Exemple et téléchargement

Vous pouvez voir un exemple d’utilisation et télécharger le fichier ici :

http://ben.dojotoolkit-fr.org/test_SpellCheck.html

Dépendances

Attention, ce widget nécessite aussi la présence de MenuGenerator !
En plus de cela, vous devez disposé du binaire aspell sur le serveur qui va héberger la page.

Utiliser la classe

Pour que cela fonctionne:

  • Placez le fichier « SpellCheck.js » dans dojox/widget/
  • Placez le fichier bundle i18n « SpellCheck.js » dans dojox/widget/nls/
  • et n’oubliez pas le require :
    dojo.require("dojox.widget.SpellCheck");
  • Le fichier php peut-être placé n’importe où. Vous pouvez configurer son emplacement via l’attribut « aspell » de l’objet SpellCheck

    Track

    Ce widget est disponible sur le track de dojo : http://bugs.dojotoolkit.org/ticket/7618

    A propos

    Technophile passionné par le web, Je travaille actuellement en tant qu'Expert Dojo auprès de la banque ING aux Pays Bas. http://www.linkedin.com/in/santalucia

Publié dans code Tagués avec :

Laisser un commentaire