Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

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>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_456581031" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1070190732" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_293635749" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>