SpellCheckAsYouType (SCAYT)

Info

SCAYT 3 for Editable Controls 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.

As it does not affect the functionality of your application or website, one of the most popular ways of using SCAYT 3 for Editable Controls is integrating it with any system where spelling and grammar check functionality are required, e.g. website forms, Customer relationship management (CRM) systems, Content management systems (CMS), etc.

SpellCheckAsYouType (SCAYT) 3 for Editable Controls

SpellCheckAsYouType (SCAYT)

New version of SCAYT 3 for Editable Controls includes the following major features and enhancements:

  • English Grammar checking functionality
  • New modern User Interface
  • Advanced User Dictionary management
  • Supported controls: textarea, input, iframe, div, span
  • Extended and documented API
  • Supported browsers: Chrome, Firefox, Safari, Internet Explorer 11+, MS EDGE
  • Enhanced text-editing: Drag and Drop, Undo and Redo commands, Keyboard Shortcuts
  • Section 508 and WCAG 2.0 compliant

Check SCAYT for Editable Controls User Manual to find out how it works in details.

SCAYT initialization (imperative notation)

With the imperative notation, SCAYT component is initialized in JavaScript code.

This is Input:
This is Textarea:
This is Span: This is an exampl of a sentence with two mispelled words. Just type text.
This is Div:
This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.
This is Iframe:

SCAYT initialization (declarative notation)

With the declarative notation, the SCAYT component is declared as a data-scayt-optionName attribute directly in a certain editable element for which SCAYT will be initialized (E.g. data-scayt-autocreate, data-scayt-spellcheckLang="en_US").

This is Input:
This is Textarea:
This is Span: This is an exampl of a sentence with two mispelled words. Just type text.
This is Div:
This is an exampl of a sentence with two mispelled words. Just type text with misspelling to see how it works.
This is Iframe:

Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    //Setup path to SCAYT Hosted loader
    <script type="text/javascript" src="http(s)://svc.webspellchecker.net/spellcheck31/lf/scayt3/scayt/scayt.js"></script>
    //Setup path to SCAYT Licensed loader
    <script type="text/javascript" src="http(s)://spellcheck_host/spellcheck/lf/scayt3/scayt/scayt.js"></script>
</head>
<body>
<!-- Controls for SCAYT with the imperative notation -->
<textarea id="elementId">This is an exampl of a sentence with two mispelled words. Just type text with to see how it works.</textarea>
<iframe id="iframe" src="editable_doc.html"></iframe>
<!-- Controls for SCAYT with the declarative notation -->
<!-- The list of options can be found in API documentation.-->
<textarea data-scayt-autocreate data-scayt-enableGrayt="true" data-scayt-moreSuggestionsCount="10" >This is an exampl of a sentence with two mispelled words. Just type text with to see how it works.</textarea>
<iframe data-scayt-autocreate data-scayt-moreSuggestionsCount="10" src="editable_doc.html"></iframe>
<!-- Example of editable_doc.html for iframe-->
<html>
    <head>
        <title>SCAYT document</title>
        <script type="text/javascript">
            document.designMode = "On";
        </script>
        <style type="text/css">
            html, body{
                font-size: 12px;
                font-family:Verdana, Arial, Helvetica, sans-serif;
                overflow: hidden;
            }
        </style>
    </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>
<script>
    //Example of initzialization in form and contenteditable controls 
     var instance = new SCAYT.SCAYT({
	 //The encrypted customer ID activates the service. It's provided on the subscription in config.ini file or can't downloaded from your admin section on the webspellchecker.net website "Download Configuration File".
	 customerId: "Your-Encrypted-Customer-ID",
     //DOM node with text or its selector.
     container: document.getElementById('elementId'),
     //The parameter turns Grammar As You Type on/off on the SCAYT startup. If ‘true’, it turns on grammar check functionality automatically once SCAYT has started.
     enableGrayt: "true",
     //The parameter allows to specify protocol for WSC service (entry point is ssrv.cgi) full path.
     serviceProtocol: "http",
     //The parameter allows to specify host for WSC service (entry point is ssrv.cgi) full path.
     serviceHost: document.location.host,
     //The parameter allows to specify default port for WSC service (entry point is ssrv.cgi) full path.
     servicePort: '80',
     //The parameter allows to specify path for WSC service (entry point is ssrv.cgi) full path.
     servicePath: 'spellcheck/script/ssrv.cgi',
     //The parameter allows to specify user defined menu items with custom behavior. 
     additionalMenuItems: {
        "customItem1": {
             itemTitle: "Custom item in clipboard section",
             order: 0,
             group: "clipboard",
             extraClass: "some-class-1",
             onClick: function() {
                alert("Thank you! Context menu will be closed");
                return false;
            }
        }
     },
     //The parameter sets a shortcuts list. It is an array containing objects with a shortcut and callback function.
     shortcutsList: [
        {
            shortcut: SCAYT.CTRL + 66,
            callback: function() {
            alert("ctrl+B from user");
            }
        }
    ],
     //The parameter sets length of the Undo array.
     undoDataSize: 10,
     //The parameter allows to specify a desired theme for UI.
     theme: "classic",
     //The parameter defines minimum length of the letters that will be collected from 
     // container's text for spell checking. Possible value is any positive number.
     minWordLength: 4,
     //The parameter sets localization. If no parameter is specified by a user, 
     //it will be detected automatically from a browser settings. 
     //If the parameter can't be automatically detected, a default value will be used.   
     localization: "en",
     //The parameter specifies the names of tags which will be skipped while spell checking. 
     //It is a string containing tag names separated by commas (","). 
     //Please note that the "style" and "script" tags will be added to a specified tag list.
     elementsToIgnore: "style|script",
     //The parameter activates a User Dictionary in SCAYT.
     userDictionaryName: "MyUserDictionaryName",
     //The parameter links SCAYT to custom dictionaries. 
     //Here is a string containing dictionary IDs separated by commas (",").
     customDictionaryIds: "ID1, ID2",
     //The parameter sets the customer ID for SCAYT. 
     //It used for a migration from free, ad-supported version to paid, ad-free version.
     // customerId: "encrypted-customer-id",
     // The parameter turns on/off SCAYT on the autostartup. 
     //If "true", turns on SCAYT automatically after loading the SCAYT application.  
     autoStartup: true,
     //The parameter defines the existence and the order of menu items inside of their sections. 
     //E.g. if you remove the "Control" section, then all its items (Ignore, Ignore All, Add Word) 
     //will not be included to the view. Please note that the "About" menu item 
     //and its tab aren’t allowed to be removed by default. 
     ///Such a customization can be provided for an additional fee and for more details, 
     //please contact support@webspellchecker.                                       
     contextMenuSections: 
      'suggest|moresuggest|control|clipboard|options',
     //The parameter defines existance and order of menu items inside of their sections.
     contextMenuCommands: 
      'ignore|ignoreall|addword|undo|redo|cut|copy|paste|customItem1|settings|togglescayt|help',                                       
     //The parameter defines the number of SCAYT suggestions to show in the context menu. 
     //Possible values are: "0" (zero) – No suggestions are shown in the context menu. 
     //All suggestions will be listed in the "More Suggestions" sub-menu. 
     //Positive number – The maximum number of suggestions to show in the context menu. 
     //Other suggestions will be shown in the "More Suggestions" sub-menu. 
     //Negative number – 5 suggestions are shown in the context menu. 
     //All other suggestions will be listed in the "More Suggestions" sub-menu.
     suggestionsCount: 3,
     //The parameter enables/disables the "More Suggestions" sub-menu in the context menu. 
     //Possible values are: "0" (zero) – No suggestions are shown in the "More Suggestions" sub-menu. 
     //Positive number – The maximum number of suggestions to show in "More Suggestions" sub-menu. 
     //Negative number – 10 suggestions are shown in "More Suggestions" sub-menu.
     moreSuggestionsCount: 10,
     //The parameter sets the default spell checking language for SCAYT.  Possible values are:
     // 'en_US', 'en_GB', 'pt_BR', 'da_DK', 'nl_NL', 'en_CA', 'fi_FI', 'fr_FR', 'fr_CA',
     // 'de_DE', 'el_GR', 'it_IT', 'nb_NO', 'pt_PT', 'es_ES', 'sv_SE'.
     spellcheckLang: "en_US",
     //The parameter customizes the SCAYT dialog to show particular tabs. 
     //Please note that the "About" menu item and its tab aren’t allowed to be removed by default. 
     //Such a customization can be provided for an additional fee and for more details, please contact support@webspellchecker.
     uiTabs: 'options,languages,dictionaries,about',
     //This is the SCAYT onLoad callback.
     onLoad: function() {
        // "this" refers to SCAYT instance
        this.setDisabled(true);
        }                                        
     });

    // Example of initzialization in Iframe 
    var iframeInstance;
    var iframeElement = document.getElementById('iframe');

    SCAYT.SCAYT.createScaytControl(iframeElement, {
	//The encrypted customer ID activates the service. It's provided on the subscription in config.ini file or can't downloaded from your admin section on the webspellchecker.net website "Download Configuration File".
			customerId: "Your-Encrypted-Customer-ID",
            autoStartup: true,
            contextMenuSections: 'suggest|moresuggest|control|clipboard|options',
            contextMenuCommands: 'ignore|ignoreall|addword|undo|redo|cut|copy|paste|customItem1|settings|togglescayt|help',
            uiTabs: 'options,languages,dictionaries,about',
            suggestionsCount: 3,
            enableGrayt: true,
            moreSuggestionsCount: 10,
            spellcheckLang: "en_US",            
            localization: 'en',
            additionalMenuItems: {
                    'customItem1': {
                        itemTitle: 'Custom item in clipboard section',
                        order: 0,
                        group: 'clipboard',
                        extraClass: 'some-class-1',
                        onClick: function() {
                            alert("Thank you! Context menu will be closed");
                            return false;
                        }
                    },
                    
                },
            shortcutsList: [
                    {
                        shortcut: SCAYT.CTRL + 66,
                        callback: function() {
                            alert('ctrl+B from user');
                        }
                    }
                ]               
            
         },

         function(instance) {
        iframeInstance = instance;
        }
        ); 
 
</script>
</body>
</html>