You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

This guide outlines the main steps that you need to follow in order to integrate and configure the SCAYT for Editable Controls with HTML contenteditable elements such as div, textarea, iframe, etc. All the described steps are provided for the Cloud version of SCAYT.

Good to know:

  • SCAYT is a standalone control that is used for spell and grammar checking of single-line or multiline HTML elements and can be integrated with such editable controls as textarea and input, controls with a contenteditable attribute and iframe.
  • To get started with the trial or paid version of SCAYT for Editable Controls, it is required to subscribe to the Cloud SCAYT services. On the subscription, you will receive an email with your encrypted customer ID, an activation key, that is required for the SCAYT service activation.

1. Add SCAYT Script

First of all, you need to add a script on your page and define a path to the SCAYT application.

<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>

2. Initialize SCAYT in HTML Editable Elements

The next step is to initialize the SCAYT functionality for chosen elements and define the required parameters. Below you will find examples of SCAYT initialization in div, iframe, input and textarea elements.

  • Specify your encrypted customer ID. The required parameter for the Cloud SCAYT service activation is customerId. You must pass your encrypted customer ID value received on the subscription to access the SCAYT services.
customerId: 'encrypted-customer-ID'

2.1. Contenteditable DIV Element

Initialize SCAYT functionality in <div> element using either imperative or declarative notation as it is shown in the examples below.

SCAYT 3 (Imperative Notation):
<div contenteditable id="container1">
    This is an exampl of a sentence with two mispelled words.
    Just type text with misspelling to see how it works.
</div>
 
<script>
    var instance1 = new SCAYT.SCAYT({
        container: document.getElementById("container1"),
        autoStartup: true,
        spellcheckLang: 'en_US',
        serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',
 	    servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
	 customerId: 'encrypted-customer-ID'
    });
</script>
SCAYT 3 (Declarative Notation):
<script>
    window.SCAYT_CONFIG = {
        spellcheckLang: 'en_US',
 	    serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',
        servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'encrypted-customer-ID'
    };
</script>
 
<div contenteditable id="container1" data-scayt-autocreate="true">
    This is an exampl of a sentence with two mispelled words.
    Just type text with misspelling to see how it works.
</div>

2.2. Contenteditable IFRAME Element

Initialize SCAYT functionality in <iframe> element using either imperative or declarative notation as it is shown in the examples below.

SCAYT 3 (Imperative Notation):
<iframe id="container2" src="editable_doc.html"></iframe>
 
<script>
    var iframeInstance;
    var iframeElement = document.getElementById("container2");
 
    SCAYT.SCAYT.createScaytControl(iframeElement, {
            container: document.getElementById("container1"),
            autoStartup: true,
            spellcheckLang: 'en_US',
            serviceProtocol: 'https',
            serviceHost: 'svc.webspellchecker.net',
            servicePort: '443',
            servicePath: 'spellcheck31/script/ssrv.cgi',
            customerId: 'encrypted-customer-ID'
        },
        function(instance) {
            iframeInstance = instance;
        }
    );
</script>
SCAYT 3 (Declarative Notation):
<script>
    window.SCAYT_CONFIG = {
        spellcheckLang: 'en_US',
 	    serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',       
        servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'encrypted-customer-ID'
    };
</script>
 
<iframe id="container2" data-scayt-autocreate="true" src="editable_doc.html"></iframe>

/*Editable_doc.html example: */
 
<html>
	<head>
		<title>SCAYT for Editable Controls</title>
    </head>
      <body contenteditable>This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.
      </body>
</html>

2.3. Contenteditable INPUT Element

Initialize SCAYT functionality in <input> element using either imperative or declarative notation as it is shown in the examples below.

SCAYT 3 (Imperative Notation):
<input id="container3" type="text" value="This is an exampl of a sentence with two mispelled words.">
 
<script>
    var instance3 = new SCAYT.SCAYT({
        container: document.getElementById("container3"),
        autoStartup: true,
        spellcheckLang: 'en_US',
        serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',
        servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'encrypted-customer-ID'
    });
</script>
SCAYT 3 (Declarative Notation):
<script>
    window.SCAYT_CONFIG = {
        spellcheckLang: 'en_US',
 	    serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',       
        servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'encrypted-customer-ID'
    };
</script>
 
<input id="container3" data-scayt-autocreate="true" type="text" value="This is an exampl of a sentence with two mispelled words.">

2.4. Contenteditable TEXTAREA Element

Initialize SCAYT functionality in <textarea> element using either imperative or declarative notation as it is shown in the examples below.

SCAYT 3 (Imperative Notation):
<textarea id="container4">
    This is an exampl of a sentence with two mispelled words.
</textarea>
 
<script>
    var instance4 = new SCAYT.SCAYT({
        container: document.getElementById("container4"),
        autoStartup: true,
        spellcheckLang: 'en_US',
        serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',
        servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'encrypted-customer-ID'
    });
</script>
SCAYT 3 (Declarative Notation):
<script>
    window.SCAYT_CONFIG = {
        spellcheckLang: 'en_US',
 	    serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',       
        servicePort: '443',
        servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'encrypted-customer-ID'
    };
</script>
 
<textarea data-scayt-autocreate="true" id="container4">
    This is an exampl of a sentence with two mispelled words.
</textarea>

Check a demo page with SCAYT for Editable Controls on our website.


Still Need a Help?

If you are still experience some difficulties with configuring SCAYT for Editable Controls, please check our training video on our official YouTube channel. It will guide you through all configurations steps and demonstrate how to enable a comprehensive spell and grammar checking tool in your web application or website.


Can be also useful: