How To Add A Spelling And Grammar API Into Your HTML Editor

The Froala Editor is a lightweight next-generation WYSIWYG HTML Editor that developers can easily integrate into their applications. It is written in JavaScript and provides rich text editing experiences for users of all experience levels. As a testament to the editor’s flexibility, and ease of use, in addition to its rich feature set, successful companies like Samsung, Apple, IBM, Intel, and also Salesforce are changing the world, and they use Froala.

One of the reasons for the Froala Editor’s popularity is its simple, smart, and intuitive interface which accommodates over 100 features. Most importantly, it does this without an overwhelmingly complex and complicated GUI. One of the ways the Froala editor keeps things simple is the Froala Smart Toolbar. The Smart Toolbar groups all user actions into four categories. As a result, users can quickly and easily find the features they need, when they need them.

Due to its ultra-high performance, well-structured and secure interface, as well as its powerful API and server integrations, Froala is the choice for many of today’s top businesses.

In this article, we’ll take a look at how we can quickly add this top-rated spelling and grammar API into the Froala WYSIWYG HTML editor. 

How can I add WProofreader spelling and grammar checker to Froala editor?

WProofreader is a product developed by WebSpellChecker that provides advanced spelling, grammar, and text style checking. With WProofreader, users can see and correct typos and grammar mistakes as they enter text. Best of all, WProofreader highlights misspellings as well as grammar errors in real-time by displaying replacement suggestions on hover. This way, users can correct their errors on the fly. 

As one of the cleanest and finest HTML editors available, the Froala  WYSIWYG seamlessly integrates with WProofreader.  You can easily add the WProofreader spelling and grammar checker to Froala editor in a few simple steps. 

Firstly, you need to go to the WellSpellChecker website and subscribe to the WProofreader Cloud service. Once you have subscribed, you will receive an activation key. Then, you need to specify the activation key in the WProofreader configuration. In order to do this, bypass the activation key as a value for the serviceId option in the configuration script. Check out the snippet below for details. 

<script>
  window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    autoDestroy: true,
    serviceId: "service-id-recieved-from-webspellchecker-after-subscription"
  };
</script>

Your JavaScript file after adding configuration and initializing the editor should look something like follows. 

<!-- Include the wscbundle.js file. -->
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
  window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    autoDestroy: true,
    serviceId: "service-id-recieved-from-webspellchecker-after-subscription"
  };
</script>

<script>
  new FroalaEditor('#froala-editor', {
      iframe: true,
      events: {
          'initialized': function() {
              WEBSPELLCHECKER.init({
                  container: this.$iframe ? this.$iframe[0] : this.el
              });
           }
       }
  }); 
</script>

Finally, to confirm your successful integration of the WProofreader spelling and grammar API with Froala, type some simple text into the HTML editor. It will highlight your spelling mistakes and grammar errors as you type.

As you can see, adding spelling and grammar API to Froala WYSIWYG HTML editor is pretty easy. So give the Froala editor a try. In addition to being a beautiful JavaScript web editor, its easy integration and clean design will ensure your developers love it as much as your users do.

Ready to add spelling and Grammar API into your HTML editor? Get started with Froala now!