Spell Checking for TinyMCE Editor

TinyMCE Editor - Adding Spellchecking using JavaScript Spell Check


Javascript Spell Check provides allows you to spell-check TinyMCE editor using the $Spelling.SpellCheckInWindow function.

To Spell-check every instance of TinyMCE editor on your page - just use this 1 like of code on an button or event: 

$Spelling.SpellCheckInWindow('editors')


To Spell-check just one TinyMCE editor instace:

To selectively target a rich editor - you cannot pass the Id of the textarea it replaces - as most editors are unaware of changes to the fields that they override.

Pass the ID of the iframe created by the Editor (use firebug to find this) 


<input type="button" value="Spell Check" onclick="$Spelling.SpellCheckInWindow('mce_0_ifr')" />

The first instance of TinyMCE on you page will have this id "mce_0_ifr", the second "mce_1_ifr", the third will be "mce_2_ifr".....

Download the JQuery Spell Check Plugin »

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
tinymce.init({
	selector:'textarea'	}); 
</script>
 
<input type="button" value="Spell Check" onclick="$Spelling.SpellCheckInWindow('editors')" />

Installation

Getting started with JavaScript spell check is very simple.

  • Download JavaScriptSpellCheck.zip
  • Unzip the package
  • Copy the " JavaScriptSpellCheck" folder to the root folder of your website; its URL should be "/JavaScriptSpellCheck"
  • Note: If you are using an ASP.Net server - copy ASPNetSpell.dll to the "/bin/ASPNetSpell.dll"
  • Open "/ JavaScriptSpellCheck/02-TestInstall.html" in your browser to test the installation.
  • Copy the source code form this example into one of your own web pages.

Primary Functions

Function Description Example
$Spelling.SpellCheckInWindow(Fields) Opens a spellchecking dialog window Live Demo With Source Code...
$Spelling.SpellCheckAsYouType(Fields) Causes any texarea(s) to underline any misspelled words - and provides spelling suggestions on right click. Live Demo With Source Code...
$Spelling.LiveValidation(Field,MessageElementId) Shows a warning message beside Field when it contains spelling errors. Live Demo With Source Code...


Real-Time Spell Checking Functions

Function Description Example
$Spelling.BinSpellCheck(input) Returns bool:
  • True if input is in the dictionary
  • False if it is not.
Live Demo With Source Code...
$Spelling.BinSpellCheckFields(Fields) Spell checks one or more fields in your page - and returns bool:
  • True if all fields are spelled correctly
  • False if the fields contain spelling errors.
Live Demo With Source Code...
$Spelling.SpellCheckSuggest(input) Returns an array of spelling suggestions for input. Live Demo With Source Code...
$Spelling.ListDictionaries() Returns an array of currently installed dictionaries in your JavaScriptSpellCheck/dictionaries folder. Live Demo With Source Code...

AJAX Spell checking Functions

Function Description Example
o = $Spelling.AjaxSpellCheck(input);

o.onSpellCheck = function(result,suggestions){}

Spellchecks a word and asynchronously returns a boolean spellchecking result and suggestions. Live Demo With Source Code...
o = $Spelling.AjaxSpellCheckFields(Fields)

o.onValidate = function(result){}

Spell checks one or more fields in your page - and returns asynchronously a boolean spellchecking result. Live Demo With Source Code...
o = $Spelling.AjaxDidYouMean(string)

o.onDidYouMean = function(result){}

Asynchronously returns an suggestions string for a search box spellchecking phrase. Live Demo With Source Code...

Properties

Property Type Default Value Description
$Spelling.DefaultDictionary string "English (International)" The dictionary language used by JavaSript SpellCheck.
$Spelling.UserInterfaceTranslation string "en" Translates the context menu and spellchecker dialog into over 50 international languages.
  • See our translations page for a full list of language locale codes.
$Spelling.ShowStatisticsScreen bool false Shows a statistics screen (word count, edit count) after SpellCheckInWindow.
$Spelling.SubmitFormById string "" Will submit a form (identified by its id attribute) once spellchecking once SpellCheckInWindow is complete.
$Spelling.Theme string "js.modern" Allows you to apply a CSS theme to change the appearance of JavaScript SpellCheck.
  • Corresponds to theme folder in /JavaScriptSpellCheck/themes
$Spelling.CaseSensitive bool true Spellchecker notices cAse mIstAkes
$Spelling.IgnoreAllCaps bool true Spellchecker ignores BLOCK CAPITAL letters which are often acronyms.
$Spelling.CheckGrammar bool true Spellchecker notices basic grammar mistakes such as sentence casing and repeated words.
$Spelling.IgnoreNumbers bool true Spellchecker ignores words with numbers in them like "High5" or "MSO7262BGO"
$Spelling.ShowThesaurus bool true Spellchecker shows a thesaurus and look-up-meaning link during SpellCheckInWindow
$Spelling.ShowLanguagesInContextMenu bool false Allows the user to pick a dictionary Language from all installed dictionaries during SpellCheckAsYouType
$Spelling.ServerModel string "auto" Allows you to pick which server model JavaScriptSpellCheck will use for its AJAX requests. Values available are:
  • 'php' - PHP
  • 'asp' - classic ASP
  • 'asp.net' - ASP.net 2 or above raw request handler
  • 'aspx' - ASP.net 2 or above ASPX page
  • 'auto' automatically detects the best choice in the vast majority of cases.
$Spelling.PopUpStyle




string "modal" SpellCheckInWindow pop-up style:
  • "modal" - a modal dialog window
  • "modeless" - a modeless dialog window
  • "popup" - a normal popup
  • "modalbox" - prototype style JavaScript modal pop-up.
  • "fancybox" - jquery style JavaScript modal pop-up.

See the custom PopUps And Themes Tutorial.


Events

Event Description Example
onDialogOpen() SpellCheckInWindow dialog pops up. $Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onDialogOpen = function(){}

onDialogComplete() SpellCheckInWindow dialog completes successfully - user has not quit $Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onDialogComplete = function(){}

onDialogCancel() SpellCheckInWindow dialog completes is quite by the user $Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onDialogCancel = function(){}

onDialogClose() SpellCheckInWindow dialog closes for any reason $Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onDialogClose = function(){}

onChangeLanguage(language) SpellCheckInWindow or SpellAsYouType language is changed by the user.
  • Language name is passed as a string
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onChangeLanguage = function(language){}

onIgnore(word) A word is ignored by the user in wither SpellCheckInWindow or SpellAsYouType.
  • Word is passed as a string
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onIgnore = function(word){}

onIgnoreAll(word) The user clieck 'Ignore All' for a word in either SpellCheckInWindow or SpellAsYouType.
  • Word is passed as a string
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onIgnoreAll = function(word){}

onChangeWord(from,to) The user changes a word in either SpellCheckInWindow or SpellAsYouType.
  • "from" and "to" are passed as strings
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onChangeWord = function(from,to){}

onChangeAll(from,to) The user clicks 'Change All' for a word in SpellCheckInWindow.
  • "from" and "to" are passed as strings
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onChangeAll = function(from,to){}

onLearnWord(word) The user "Adds to Dictionary" in either SpellCheckInWindow or SpellAsYouType.
  • Word is passed as a string
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onLearnWord = function(word){}

onLearnAutoCorrect(from,to) The user adds to autocorrect in SpellCheckInWindow.
  • "from" and "to" are passed as strings
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onLearnAutoCorrect = function(from,to){}

onUpdateFields(arrFields) Any field is updated due to spellchecing.
  • arrFields is returned - an array of the Ids of all updated fields.
$Spelling.PopUpStyle="modeless";

o = $Spelling.SpellCheckInWindow('all');
o.onUpdateFields = function(arrFields){}



jQuery Functions & Options

JavaScriptSpellCheck also provides a jQuery SpellCheck Plugin

jQuery Functions


Function Return Value Description
$('#mySelction').spellCheckInDialog(options) Opens a spellchecking dialog window Spelling Instance Object
  • #mySelction can be any jQuery selection of elements
$('#mySelction').spellAsYouType(options) Spelling Instance Object Causes any texarea(s) selected to underline any misspelled words - and provides spelling suggestions on right click.
  • #mySelction can be any jQuery selection of elements
$('#mySelction').binSpellCheckFields(options) *True if all fields are spelled correctly
  • False if the fields contain spelling errors.
Spell checks all field in the selection.
  • #mySelction can be any jQuery selection of elements


jQuery Options


Option Default Value Description
defaultDictionary "English (International)" Default dictionary the spell checker will use.
userInterfaceTranslation "en" Translates the spellchecker dialog into over 50 international languages automatically.
showStatisticsScreen true Shows statistics such as word count and number of edits after spellCheckInDialog is complete.
submitFormById "" javascript id of a form to submit after spellCheckInDialog is complete.
theme "modern" CSS theme to apply to the spellchecker.
  • Relates to a folder in "JavaScriptSpellCheck/themes"
  • Learn more...
caseSensitive true Catches spelling mistakes caused by iNcoorect CasIng.
checkGrammar true Catches basic grammar mistakes such as repeated words, sentence casing and punctuation
ignoreAllCaps true Ignores BLOCK CAPS which are often abbreviations or product codes.
ignoreNumbers true Ignores w0rds w1th num8rs in them which are often product codes.
showThesaurus true Shows a thesaurus and word meaning lookup during spellCheckInDialog
showLanguagesInContextMenu true Allows the user to change dictionary 'on the fly' when using spellAsYouType
serverModel "auto" Chooses the server model that does the 'behind the scenes' AJX spellchecking requests. We support:
  • 'php' - PHP or above
  • 'asp' - classic ASP
  • 'asp.net' - ASP.net 2 or above raw request handler
  • 'aspx' - ASP.net 2 or above ASPX page
  • 'auto' automatically detects the best choice in the vast majority of cases.
popUpStyle "auto" spellCheckInDialog pop-up style:
  • "modal" - a modal dialog window
  • "modeless" - a modeless dialog window
  • "popup" - a normal popup
  • "modalbox" - prototype style JavaScript modal pop-up.
  • "fancybox" - jQuery JavaScript modal pop-up.

See the customPopUps And Themes Tutorial.



A Spellchecer for TinyMCE Editor using JavaScript SpellCheck

TinyMCE is an outstanding HTML editor used in CMS systems, websites and many web popular platforms including Wordpress. It works kind of like a word-processor embedded on a webpage.

Tinymce's spellchecker is no longer operational. To explain, TinyMCE's spellchecker was previously provided by 'hacking' a Chrome toolbar API owned by Google, against Google's own legal usage policies. This spellchecking service has been discontinued permanently.

The alternative was using a PHP module called P_Spell. Although this sounds promising, almost no one actually has P_Spell installed, and doing so often required re-compiling your entire PHP Engine from its source code. Can you think of anything more complex, frustrating nor prone to causing deeply rooted bugs?

So one of the web's most important Rich Content Editors has no built in spellchecking functionality. Think of all the typos this must allow to be published to important documents and websites!

To make things worse, the browser based spellcheckers in Chrome, Safari, Opera and Modern Internet Explorer (IE) also do not work inside TinyMCE. This is because TinyMCE disables the browsers' own right-click context menu to implements it's own menu. The browser;s spellcheckers are-implemented though this (now-disabled) menu - and don't work. Its a frustrating truth.

An easy to use, cross platform solution to this problem with TinyMCE is to use JavaScriptSpellCheck to spellcheck TinyMCE's content.

"JavaScript Spellcheck" is the industry leading spellchecker plugin for websites and secure intranets. It has been developers to work as a Tinymce Spellchecker plugin which can run without the above problems, and on almost any hosting platform. This includes Apache, Nginx, TomCat and Microsoft IIS. This spellchecker benefits from over 30 international dictionaries as standard, and includes terms for Scientific, Medical, Engineering and Legal professions.

Integrating JavaScriptSpellcheck to spellcheck your TinyMCE instances should take about 5 minutes, and could improve usability and data quality of any CMS, Intranet or web-enabled application.

Download JavaScriptSpellCheck - TinyMCE Compotabille Spell-Checker ยป

We also highly recommend the NanoSpell spellchecker plugin for tinymce » for spellcheck-as-you-type functionality in TinyMCE.It is fully integrated with TinyMCE and we have struck a deal where Javascriptspellcheck license keys will also unlock NanoSpell.

Also see our other spellchecking plugins for CKEditor, TinyMCE Editor, ASP.Net, Classic ASP, jQuery & PHP
Retrieved from "http://www.javascriptspellcheck.com/HTML_Editor_SpellChecker_in_JavaScript"