20% Off All Froala Plans
Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Pricing
Get Started
Skip to content
Star

3rd Party Integration

WProofreader Spelling and Grammar Checker

Froala WYSIWYG HTML Editor has a built-in integration for WebSpellChecker.com which enables advanced spell checking. SpellCheckAsYouType allows the user to see and correct misspellings while typing. Misspelled words are underlined. The user just needs to right-click a marked word and select a suggestion to replace the word with.

To integrate and activate the WebSpellChecker functionality on your website there are several steps to follow.

  1. Go to WebSpellChecker.com website and Subscribe to the Cloud WebSpellChecker services.
  2. On the subscription, you will receive an activation key that you need to specify in the WebSpellChecker configuration.
  3. Pass scaytCustomerId as an option when initializing the editor. It should be a long identifier like: "1:ut12s1-7rr3J1-Fhioh12-mIewo-FJIjo12-BVUB21-uEXCy2-asdpjko1-gXuG4-NUNri4-5q9A52-Pf".

web-spell-checker

Try it yourself:

This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.


HTML

<div id="froala-editor">
  <p>This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.</p>
</div>
<div id="froala-editor">
  <p>This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.</p>
</div>

CSS

<!-- Include WebSpellChecker plugin style. -->
<link rel="stylesheet" href="../css/third_party/spell_checker.min.css">

JAVASCRIPT

<!-- Include the plugin JS file. -->
<script type="text/javascript" src="../js/third_party/spell_checker.min.js"></script>
<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      scaytAutoload: true,
      scaytCustomerId: '1:long-identifier-received-from-webspellchecker-after-subscribing-to-scayt',
      pluginsEnabled: ['spellChecker'],
      toolbarButtons: ['bold', 'italic', 'spellChecker', '|', 'undo', 'redo'],
      toolbarButtonsMD: null,
      toolbarButtonsSM: null,
      toolbarButtonsXS: null
    });
  });
</script>