Spent quite some time this weekend improving the spell checker component and I’ve managed to get rich text editing to work reasonably well (especially in Mozilla). Also fixed quite a few bugs and improved the performance significantly.
Been getting a few requests to explain how this thing works, so if you’re interested in that read on, if not you might be want to play with one of the demos?
Rich text editing is still quite buggy and needs more work, but it looks promising.
The spell checker is built around a rich edit component (an iframe with designMode set to ‘on’) with a keyup event handler firing after each key press. If a separator was entered (such as space or comma) the previous word is determined using the caret position, that word is then encapsulated in a
span with a specific className (
webfx-spellchecker-word) to allow it to be accessed easily.
The word is then checked against the cached dictionary and if a match was found the style of the
span is updated to reflect the status of the word (red wavy underline if it’s misspelled). If the word was not found in the cached dictionary it’s added to the validation queue and a timer is started that will call the
_askServer method. The reason a timer is used is to allow multiple words to be checked simultaneously if they’re enterted in rapid sequence.
Once the timer triggers the
The client parses the reply using eval and then calls the
_updateWords method that iterates over the words that where validated and updates the corresponding
The fact that each individual word s encapsulated in a
span causes a few problems when words are merged or split but thats quite easy to handle. Another more difficult problem that this causes is when rich text editing is enabled and the getHTML method is called those spans should not be included, but the style information assigned to them should.
A bit of regex magic has nearly solved that problem, the spans are stripped but the only style information that is maintained in this implementation is bold/italic and underline. So if any other style information is applied to the same
span thats used to highlight misspelled words it’s lost. This obviously only applies if rich text editing is enabled.
Being such a nice guy I’ve decided to release this component under the MIT License. As one of the least restrictive licenses it allows for virtually any use, including commercial, as long as credit is given where credit is due. Obviously this also means that open source projects can use it even if they’re under a different, more restrictive, license, such as the GPL.
Fixed two bugs in the Mozilla implementation; occasionally if text was entered directly in front of a word it was lost and words where not correctly merged when the whitespace between them was deleted.
Also updated the ignore method to ignore all occurrence of the affected word.