SpellCheckAsYouType (SCAYT)

Info

SCAYT 3 for Editable Controls is a standalone control that is used for spell checking of single-line or multiline HTML elements and can be integrated with such editable controls as textarea and input, tags with a contenteditable attribute (div and etc.), and iframe.

SCAYT 3 for EC has been developed based on the SpellCheckAsYouType product and includes all of that product’s features.

As it does not affect the functionality of your application or website, one of the most popular ways of using SCAYT 3 for Editable Control is integrating it with any system where spelling check functionality is 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 introduces the following major updates:

  • New modern User Interface
  • Supported controls: textarea, input, iframe, div, span
  • New markup mechanism
  • Extended and documented API
  • Latest browsers support: Chrome, Firefox, Safari, Internet Explorer 11+, MS EDGE
  • Implemented support for Drag and Drop, Undo and Redo commands
  • Added possibility to use keyboard Shortcuts

SCAYT created via new keyword

This is Input:
This is Textarea:
This is Span: This is an exampl of a sentence with two mispelled words.
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 created via data-scayt-autocreate attribute

SCAYT controls created in such way could be configured by specifying data attribute in next format:
data-scayt-optionName. E.g. 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.
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 creation via new keyword -->
<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 creation via data-scayt-autocreate attribute -->
<!-- SCAYT controls created in such way could be configured by specifying data attribute in next format: data-scayt-optionName. E.g. data-scayt-spellcheckLang="en_US". -->
<!-- The list of options can be found in API documentation.-->
<textarea data-scayt-autocreate 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 via new keyword  
     var instance = new SCAYT.SCAYT({
     //DOM node with text or its selector.
     container: document.getElementById('elementId'),
     //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 via new keyword
    var iframeInstance;
    var iframeElement = document.getElementById('iframe');

    SCAYT.SCAYT.createScaytControl(iframeElement, {
            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,
            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>