WebSpellChecker.net Wiki

Home

Installation Instructions for Cloud SpellCheckAsYouType (SCAYT)

Please follow a step-by-step manual to embed SCAYT into your web application.

Step 1. Sign up for Cloud SCAYT service

Before the service integration, you are required to subscribe to trial or paid services at webspellchecker.net. If you already have an account, you may skip this step and move to step 2. Otherwise pleasesign up for a free 30-day trial or paid SCAYT service.

Step 2. Obtain Encrypted Customer ID

On the subscription, you will receive a confirmation email with your CustomerID, password and integration instructions.

To activate your paid SCAYT subscription, you will need to specify an encrypted customer ID (activation key) during the service configuration on your side.

The encrypted customer ID is provided in the subscription confirmation email (config.ini file) or can be downloaded from your account page on the webspellchecker.net website. Just log in using your Customer ID and password, and Download Configuration file.

Step 3. Integrate the spell checking service to your web page or application

SCAYT is provided as a standalone solution for native HTML editable controls (textarea and input, div and iframe, etc.) and available as separate plugins for such popular rich text editors as CKEditor, Froala and TinyMCE. Thus, depending on the way how and where SCAYT functionality will be used, please choose the corresponding instructions below.

CKEditor

SCAYT plugin is integrated by default with CKEditor. The free version with the banner ad and limited functionality is available for free for all CKEditor customers. In order to lift the limitations and get rid of the banner ad, the paid Cloud or Server version of the SCAYT application should be purchased.

Specify your long encrypted customer ID for the paid SCAYT service in CKEditor config.js file using the scayt_customerid parameter:

CKEDITOR.config.scayt_customerId = 'encrypted-customer-ID';

Find here the full list of SCAYT parameters available for CKEditor. Here is the list of the most commom SCAYT parameters for CKEditor that you can specify in your configuration:

  • CKEDITOR.config.scayt_autoStartup - boolean parameter that specifies if SCAYT is enabled on on startup. 'false' by default.
  • CKEDITOR.config.scayt_maxSuggestions - integer number that specifies maximum number of suggestions in the context menu. If number of suggestions exceed this number, all the others words will be displayed in the “More Suggestions” submenu 
  • CKEDITOR.config.scayt_sLang  - specifies SCAYT default language. Specified as language code and country code separated by “_” symbol. For example: “en_US”   
  • CKEDITOR.config.scayt_moreSuggestions - specifies if “More Suggestions” submenu is enabled in the context menu. Possible values are ”on” and “off”  
  • CKEDITOR.config.scayt_contextCommands - allows to customize SCAYT context menu items (Add word, Ignore all). Possible values are:  ”off”, “all” or string with ”|” delimiter and combination of words ”add”, “ignoreall” (e.g. ”add|ignoreall”)
  • CKEDITOR.config.scayt_uiTabs  - specifies visibility of SCAYT tabs in the setting dialog and toolbar button. The value must contain ”1” (enabled) or ”0” (disabled) value for each of the following entries in this precise order separated by comma (”,”): ”Options”, ”Languages” and ”Dictionary”. For example: '1,0,1', wich means that Options and Dictionary tabs are enabled  
  • CKEDITOR.config.scayt_contextMenuItemsOrder - specifies order of placing of SCAYT context menu items by groups. It must be a string with one or more of the following words separated by a pipe (“|”): 'suggest' - main suggestion word list, 'moresuggest' - more suggestions word list, 'control' - SCAYT commands such as 'Ignore' and 'Add Word'. For example: 'moresuggest|control|suggest'.

Please check our sample demo page with SCAYT plugin for CKEditor.

Froala Editor

SCAYT product is integrated with Froala Editor starting Froala Editor release 2.6.0. Froala's customers can use the free version of the SCAYT service in a bundle with Froala Editor with some usage limitations and a banner ad. In order to lift the usage limitations, get rid of the banner ad and get access to the additional features and languages, it's required to subscribe/upgrade to the paid services.

To activate the SCAYT functionality in Froala Editor, you need to pass your encrypted customer ID for scaytCustomerId parameter when initializing Froala.

 
<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      scaytAutoload: true,
      scaytCustomerId: 'encrypted-customer-ID',
      pluginsEnabled: ['spellChecker'],
      toolbarButtons: ['bold', 'italic', 'spellChecker', '|', 'undo', 'redo'],
      toolbarButtonsMD: null,
      toolbarButtonsSM: null,
      toolbarButtonsXS: null
    });
  });
</script>

Here you can find a demo sample of the SCAYT integration with Froala Editor.

TinyMCE

  1. Download SCAYT plug-in for TinyMCE. You can also download SCAYTContextMenu plug-in, which enables extra features for SCAYT.
  2. Unpack the downloaded zip archive and copy the extracted SCAYT folder to the TinyMCE plug-ins directory (by default: \tinymce\jscripts\tiny_mce\plugins\). Note! Folder name should be “scayt” for SCAYT plug-in and “scaytcontextmenu” for SCAYTContextMenu plug-in.
  3. Edit HTML page that contains TinyMCE. Register SCAYT plug-in and add it to TinyMCE toolbar. You can also register SCAYTContextMenu plug-in in the same way.
plugins : "scayt,contextmenu",  
theme_advanced_buttons1 : "code,scayt,|,bold,italic,|,cut,copy,paste",

Encrypted customerID is required to perform migration from free to paid version. Encrypted customerID is provided in the registration email sent to customer after sign-up for WebSpellChecker.net account on Step 1. CustomerID should be specified in the instance of TinyMCE:

scayt_customer_id: "your_encrypted_customer_id",

You can also set up the following SCAYT parameters for TinyMCE:

  • scayt_auto_startup: true is boolean parameter that specifies if SCAYT is enabled on startup, 'false' by default.
  • scayt_context_mode: ”default” specifies SCAYT Context Mode. Possible values are: ”default”,”off” and “copy-paste”.
    “default” -all registered default and custom plugin's items will be shown;
    “copy-paste” all registered items will be disabled except ”Copy”, ”Paste” and all other plugin's items;
    “off” - all registered items will disabled except other plugin's items avaliable only if SCAYTContextMenu plug-in is registered.
  • scayt_context_moresuggestions:“on” specifies if “More Suggestions” menu is enabled. Possible values: ”on”/“off”  
  • scayt_context_commands:“add|ignore” specifies SCAYT context menu items (Add word, Ignore , Ignore all) possible values:  ”off”/“all” or string with ”|” delimiter and combination of words ”add”, ”ignore”, ”ignoreall”(e.g. ”add|ignoreall”)
  • scayt_context_menu_items_order: ”control|moresuggest|suggest” specifies order of placing SCAYT context menu items by groups. It must be a string with one or more of the following words separated by ”|” symbol: 'suggest' main suggestion word list, 'moresuggest' - more suggestions word list, 'control'     -SCAYT commands such as 'Ignore' and 'Add Word'    
  • scayt_max_suggestion: 6 number of visible in right-mouse menu suggestion (all other suggestions will be present in submenu ”More Suggestions”); ”-1” disables submenu    
  • scayt_slang: ”en_US” specifies spellchecking language for SCAYT with no changes to tinyMCE interface language. “en_US” is  default  
  • scayt_ui_tabs: ”1,0,1” is visibility of SCAYT tabs in the setting dialog and toolbar button. The value must contain ”1” (enabled) or ”0” (disabled) valuefor each of the following entries in this precise order separated by comma (”,”): ”Options”, ”Languages” and ”Dictionary”.

You can find example of configuration SCAYT for TinyMCE on the demo page.

Editable Controls: Input and Textarea

SCAYT initialization in <input> (Imperative)

  • Specify SCAYT application URL:
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>
  • Initialize SCAYT in <input> control:
<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: 'your_encrypted_customer_id'
    });
</script>

SCAYT initialization in <textarea> (Imperative)

  • Specify SCAYT application URL:
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>
  • Initialize SCAYT in <textarea> control:
<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: 'your_encrypted_customer_id'
    });
</script>

Please check our sample demo page with SCAYT 3 for Editable Controls.

Contenteditable Controls: Div and Iframe

SCAYT initialization in <div> (Imperative)

  • Specify SCAYT application URL:
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>
  • Initialize SCAYT in <div> element:
<div contenteditable="true" 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: 'your_encrypted_customer_id'
    });
</script>

SCAYT initialization in <inframe> (Imperative)

  • Specify SCAYT application URL:
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>
  • Initialize SCAYT in <iframe> element:

<!-- The body tag of iframe element should have contenteditable attribute -->

<iframe id="container2" src="editable_doc.html"></iframe>
 
<script>
    var iframeInstance;
    var iframeElement = document.getElementById("container2");
 
    SCAYT.SCAYT.createScaytControl(iframeElement, {
            autoStartup: true,
            spellcheckLang: 'en_US',
            serviceProtocol: 'https',
            serviceHost: 'svc.webspellchecker.net',
            servicePort: '443',
            servicePath: 'spellcheck31/script/ssrv.cgi',
            customerId: 'your_encrypted_customer_id'
 
        },
        function(instance) {
            iframeInstance = instance;
        }
    );
</script>

Please check our sample demo page with SCAYT 3 for Editable Controls.

Dynamic (declarative) SCAYT initialization in <input>, <textarea> and <div>

  • Specify ‘window.SCAYT_CONFIG’ variable before “Specify SCAYT application URL”:
<script>
            window.SCAYT_CONFIG = {
                serviceProtocol: 'https',
                serviceHost: 'svc.webspellchecker.net',
                servicePath: 'spellcheck31/script/ssrv.cgi',
                servicePort: '443',
                customerId: 'your_encrypted_customer_id'
        };
</script>
  • Specify SCAYT application URL:
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>
  • Add ‘data-scayt-autocreate’ attribute
<input data-scayt-autocreate="true" type="text" value="Some text">

<textarea data-scayt-autocreate="true" type="text">Some text</textarea>

<div contenteditable="true" 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>

Please contact our techical support if you have not found the solution for you here.