Browser spell checks play a crucial role in ensuring error-free content. Without a spell checker, customers using your app need only leave one spelling error, and their content goals can quickly become derailed, leading to costly mistakes. Implementing a comprehensive browser spell check doesn't have to be an arduous journey for you to take on. Here’s an answer.
In fact, the TinyMCE WYSIWYG editor (used as the text entry component in 100M+ products worldwide) provides two easy-to-implement spell checking capabilities:
- Premium Spell Checker Pro plugin + multilingual service
- Browser-based spell checking
In this article, you'll learn more about how to get started with these options and you can be confident that content created with your application, is error-free and professional.
Get started with free spell checker trial
TinyMCE's Spell Checker Pro is available to test drive with a 14-day free trial when you sign up for a TinyMCE API key. Your 14-day free trial also includes access to productivity plugins such as Accessibility Checker, Advanced Templates, and Link Checker. Once you have access to the Premium plugins with your TinyMCE API key, you can enable the spell checker by adding the plugin to your app through the TinyMCE initialization script:
<script>
tinymce.init({
selector: "textarea",
plugins: "tinymcespellchecker",
toolbar: "spellchecker",
});
</script>Browser spell check
There are several native browser spell check options (Chrome, Safari, Edge, etc), but not all native browser spell checkers are created equal. They vary by available languages, commonly used words, and industry-specific technical terms. Often you and your customers will need something more consistent, such as global spelling across all content.
To provide consistency and range of services, instead of relying on browser spell check, TinyMCE Spell Checker Pro has a variety of options available, and is flexible in its configuration:
- You can configure the languages and dictionaries you need to best support your customers
- You can set up an array of words to ignore, or add, as a part of building a custom dictionary, or enable this ability for your customers to configure one themselves
- Most importantly, you can then make that dictionary available globally across your organization, no matter which browser is used
The plugin also provides a familiar interface: Spell Checker Pro automatically highlights words that are misspelled with red underlines, and you can select a suggested correction with a right click (similar to MS Word Processors and native browser spell check).
Get started with browser-based spell checking
If you don’t want the additional functionality provided by Spell Checker Pro, but you need to provide basic spell checking for your users, you can enable browser-based spell checking in TinyMCE with one change to the TinyMCE init script. To enable browser-based spell checking in TinyMCE, set the browser_spellcheck option to true in your TinyMCE initialization script:
tinymce.init({
selector: "textarea",
browser_spellcheck: true,
});
Using the browser’s context menu
Customers may go looking for spell checking functionality from the browser’s context menu (opened on Right click). By default, TinyMCE blocks the browser’s context menu in favor of its own. But users can still access the browser-based context menu with Ctrl+Right click combination. Depending on your situation, you could disable the TinyMCE context menu by setting contextmenu: false, in which case the browser’s context menu appears on Right click.
Alternatively, if you want to use the TinyMCE context menu, we recommend adding a note to it. For example, you could define a menu item and add it to the context menu as follows:
tinymce.init({
/* ... */ contextmenu: "link useBrowserSpellcheck image table",
setup: function (editor) {
editor.ui.registry.addMenuItem("useBrowserSpellcheck", {
text: "Use `Ctrl+Right click` to access spellchecker",
onAction: function () {
editor.notificationManager.open({
text:
"To access the spellchecker, hold the Control (Ctrl) key and right-click on the misspelt word.",
type: "info",
timeout: 5000,
closeButton: true,
});
},
});
editor.ui.registry.addContextMenu("useBrowserSpellcheck", {
update: function (node) {
return editor.selection.isCollapsed() ? ["useBrowserSpellcheck"] : [];
},
});
},
});
Check out the Tiny documentation for more information about creating custom menu items, and creating custom notifications.
How to enable TinyMCE spell checker in PHP?
There is a community plugin, with basic spell checking functionality, that was initially developed and maintained by TinyMCE, but it is no longer supported because of its limited uptake – the added complexity of the PHP backend configuration is one possible explanation for the limited uptake.
TinyMCE spellchecker not working: possible causes
CDN and server configuration mismatch
If you've attempted to set up TinyMCE spell checker PHP capabilities and they're not working, the main reason why is a mismatch between CDN and server-side configuration. This requires the plugin configured for CDN TinyMCE access. For server-side or local hosting configurations, setup the spellcheck_rpc_url configuration to get started (more information in the documentation).
Browser spell check and TinyMCE Spell Checker Pro at the same time
Another cause of error could be configuring too many spell check options at once. If you have the browser_spellcheck: true and the TinyMCE Spell Checker Pro plugins both configured in the TinyMCE init script, like this one:
<script>
tinymce.init({
selector: "#editor",
plugins: "tinymcespellchecker",
browser_spellcheck: true
});
</script>Then TinyMCE Spell Checker Pro overrides browser spell check:
- If browser spell check is set to true, and TinyMCE Spell Checker Pro is not configured, then browser spell check works
- If TinyMCE Spell Checker Pro is configured, it will replace the browser spell check, even if browser spell check is configured to true
How to add spell checker to Joomla
Joomla has a text editor called JCE. The JCE editor only makes use of browser spell checking, however it's possible to integrate TinyMCE as your Joomla editor, and then configure Tiny Spell Checker Pro.
How to add spell checker to Drupal
Drupal spell checker is available from the default WYSIWYG options by activating SpellCheck in your WYSIWYG profile (for example: admin > settings > “wysiwyg profile 1” > edit). When integrating TinyMCE using the Drupal TinyMCE Module, you can change the text editor option to "TinyMCE'' and then configure Spell Checker Pro within the TinyMCE plugin list.
How to add spell checker to Wordpress
While Wordpress does not provide a browser spell check option, you can configure a Wordpress plugin to provide basic spell checking. TinyMCE has a Wordpress integration to make the process of adding a reliable spell check option easier. You can find the TinyMCE plugin in the Wordpress plugin collection.
TinyMCE spell check and more compliance options
Get started with a 14-day free trial for access to TinyMCE Premium productivity plugins, plus plugins designed to assist with compliance (Spell Checker Pro, Accessibility Checker, and Link Checker are included).
As a reminder, you can enable the spell checker by adding the plugin to your TinyMCE initialization script:
tinymce.init({
selector: "textarea", // Change this value according to your HTML
plugins: "tinymcespellchecker",
toolbar: "spellchecker",
});
Check out the TinyMCE documentation for more information about configuring the Spell Checker Pro plugin, including how to get started with multiple languages. You may also be interested in some of our other compliance features such as Accessibility Checker and Advanced Templates. Contact us at any time - we’re always keen to help our community build products with the best content creation experience possible.
