Website spelling and grammar check plugin

Disclamer: this document and all related code sample are published under MIT license.

Spellcheck plugin sample preview

Online demo is available:

This documentation describes the way to integrate a simple text checking mechanics to any web page.

Host page requirements

Current version of plugin can attach text checking to any page element except <textarea />. So if you use <textarea />, you should replace it with a <div> styled as text input box.

HTML example:

    /* Styling ot text editor block */
    .textgears-editor {
        display: inline-block;
        white-space: break-spaces;
        line-height: 1.3;
        width: 100%;
        max-width: 400px;
        height: 300px;
        box-sizing: border-box;
        padding: 20px;
        overflow-y: scroll;
        border: 1px solid black;

<!-- Any styled element to be used as text editor -->
<div class="textgears-editor" placeholder="Enter your text here">Here is sample text to demostrate text checking possibilities.</div>

Attaching a plugin

To attach a plugin to the sample <div> mentioned above, just add this code:

<!-- Init plugin, can be put on page body or inside a head block -->
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href=""/>

<!-- Can be placed on page or can be run on init script or in any other place -->
<script type="text/javascript">
    var textCheckingPlugin = new TextGearsPlugin({
        // API endpoint
        endpoint: "",
        // Place your key here
        key: "DEMO_KEY",
        // Text language
        language: "en-US",
        // Dictionary ids to be loaded on text checking. Can be empty to use default dictionary.
        // In this example you can see two dictionaries:
        // The first one is common for all of your users and can be edited with our API.
        // The second one contains words for a single user only.
        checkDictionaryIds: ["common", "user123"],
        // Dictionary to be edited on "Add to dictionary".
        // Set null to use default dictionary only or set any string value. For example, active user id.
        // You do not need to explicitly create a new dictionary for each user if you need.
        // Adding a word to a non-existing dictionary creates one automatically.
        editDictionaryId: "user123",
        // DOM elements to be handled
        editors: document.getElementsByClassName("textgears-editor"),
        // editors: [document.getElementById('textgears-editor')],
        // Timeout between the pause of input and text checking request
        timeout: 1500,
        // Set custom cascading style classes for
        theme: {
            suggestionButtonClass: "suggestion-button",
            suggestionRemoveButtonClass: "suggestion-button suggestion-remove",
            addToDictionaryButtonClass: "suggestion-button add-to-dictionary-button",
        // Start checking on init
        checkOnLoadIfNotEmpty: true,
        // Sample text changing event callback
        onTextChange: function (event) {
            document.getElementById("callback-test").innerHTML = event.text;
            // Or set input value if you have a form like this:
            // <form name="comment-form"><input type="hidden" name="comment"/></form></span>
            document.forms["comment-form"]["comment"].value = event.text;

To get a value of text editor use onTextChange event or a code like this:

let value = document.getElementsByClassName("textgears-editor")[0].innerText || "";

In further plugin versions support of <textarea/> will be provided with a native value propagation.


As you can see above, the plugin goes with its own cascade style sheet file. Feel free to copy it and change styles according to your purposes.

Don’t you have a key?

Get it in one click!