A directory of browser-based WYSIWYG editors


Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0 - Add-Ons: I got the SpellerPages spellchecker to work with htmlArea finally: Edit Log


May 2, 2004, 8:04 PM

Views: 46126
I got the SpellerPages spellchecker to work with htmlArea finally

Greetings all,
I have seen several inquiries as to getting spellerpages to work with htmlArea (I've had a couple of posts on here about the same thing myself). Since I haven't seen anybody post on here yet how to get the two to work together, I thought I'd post what I have figured out so far. It is far from perfect... but I do believe it is a step in the right direction. And because I'm sure I will need one of your help someday, I'll help out with this as much as I can. Wink

Most people's problems with getting speller pages to work with htmlArea is getting the corrected results from speller pages back into htmlArea. I have finally figured this out.

Another problem people will probably have once they get speller pages to talk back to htmlArea, is they will notice that it is spellchecking the content in the "view html source" section, not what is on the WYSIWYG section. It isn't fun having to spellcheck anchor tags and font tags. I have this one figured out as well.

And probably my biggest concern, was once I got it to send the corrected results back to the WYSIWYG section, it replaced EVERYTHING that was in there with the text from speller pages, thus you lost any & ALL of your formatting that may have been in place before beginning the spell checker. OUCH!!! Unsure I have that fixed also.

What I did is interfaced spellerpages with Luis' "find and replace" functions. Well, one of the functions. I used his ReplaceAllTxt() function. I couldn't get his ReplaceTxt() function to work correctly yet because when calling the FindTxT function, it seems to always want to start at the bottom of the page, thus requiring you to confirm starting over at the beginning of the page. Because of this, the way I have spellerpages set up right now, it replaces ALL instances of a misspelled word instead of just the instance being called. I may try and rework the FindTxt() function so we can replace one instance of the misspelled word instead of all. If somebody else reworks that before I do, I'd appreciate seeing how you did it.

So in the editor.js file, I commented out Luis' call to spell and created a call to our on spell as follows:


// SpellerPages Spellchecker
else if (cmdID.toLowerCase() == 'spell') {
if (editdoc.body.createTextRange().htmlText != "") {
setGlobalVar ("_editor_field",objname);
var TxtRange = editor_obj.contentWindow.document.body.createTextRange();
showModalDialog(_editor_url + "popups/spellchecker.php",window, "resizable: no; help: no; status: no; scroll: no; ");
else { alert('\nEditor is empty.\n\nThere are no words in the editor to spellcheck!'); }

This stores all of the content of the WYSIWYG section of the editor into your clipboard and then calls the spellchecker.php file (I don't even think I have any PHP in this file... you can probably just rename it to spellchecker.html if you want).

I've included my spellchecker.php file in this post.

The following code needs to be at the very top of the script. Starts at line 9.

      var TxtRange;      
TxtRange = dialogArguments.document.selection.createRange();

Some things to note:

I've got a form at the bottom of the script called "set" which holdes the hidden textarea "content" which is where I store the info from the clipboard when the page is loaded:

      document.set.content.value = window.clipboardData.getData("Text");  //Line 14

Speller pages then thinks it is calling from and writing to this textarea (content) throughout the script.

I took Luis' ReplaceAllTxt() function and added it to this page (starting at line 23)

      function ReplaceAllTxt(badword, goodword) {      
var searchval = badword;
var wordcount = 0;
var msg="";
while (TxtRange.findText(searchval, 1000000000, 2)) {;
TxtRange.text = goodword;

I then went into the heart of the spellerpages script and added the following lines to the replaceWord() function and replaceAll() function

      var s_word_to_repl = this.wordWin.getTextVal( ti, wi); // line 221      

ReplaceAllTxt(s_word_to_repl, newspell); // lines 226 & 267

What this does is as it is checking each word in spellerpages, whenever you click on the "Replace" or "Replace All" buttons, it calls the ReplaceAllTxt function, searches through the WYSIWYG portion of the editor, and replaces all of the instances of the "bad word" with the "good word".

Now if I can only create a function that replaces the ONE INSTANCE of the bad word that you are currently spellchecking and attach it to replaceWord(), and I fix the "UNDO" feature... I'll be all set.

The way I've got it setup here, it keeps all of your formatting intact by doing a search and replace of the misspelled words instead of just highlighting everything, spell checking, and overwriting everything that was highlited... thus loosing your formatting.

I hope this helps some of you people out. I know I was getting kind of frustrated when I wasn't getting any assistance on the same problem... but since my work insisted on htmlArea having a spellchecker, and they were willing to give me the time to work on it... here is a good running start for a lot of you who are looking for the same thing.

Since I don't have it up on a server outside of our office LAN yet, I'll throw in some screenshots below so you can see how it works.

(This post was edited by brockb on May 4, 2004, 11:21 AM)
Attachments: spellchecker.php (15.2 KB)

Edit Log:
Post edited by brockb (Novice) on May 2, 2004, 8:12 PM
Post edited by brockb (Novice) on May 2, 2004, 8:36 PM
Post edited by brockb (Novice) on May 2, 2004, 8:51 PM
Post edited by brockb (Novice) on May 4, 2004, 11:21 AM

Search for (options)