This is to provide you with step-by-step instructions that how to migrate from an old deprecated version of SCAYT product (v.2) to a new SCAYT 3 for CKEditor/Editable Controls/TinyMCE.

SCAYT 2 is a very old version of the SpellCheckAsYouType product, all the development work including bug fixing, enhancements was stopped a while ago. The WebSpellChecker team decided to develop a new version of the product which based on the modern technologies and approaches. Right now SCAYT 3, as well as components/plugins based on it, are stabled and being actively developed and maintained. New updates, features and bug fixing are announced in our each major release.

Thus, we strongly recommend you to consider the migration to a newer version of the SCAYT product in order to have access to the service and continue receiving updates including the latest features and enhancements.

SCAYT 2 product was used on the old versions of CKEditor 4.3.3 and less. The new version of the SCAYT 3 product was launched starting CKEditor 4.4+.

1. Upgrade the version of CKEditor WYSIWYG editor to the latest one available (or at least to the version 4.4+). The latest version of CKEditor plugin can be downloaded from CKEditor website.
2. Specify your long encrypted customer ID for the paid SCAYT service in CKEditor config.js file using the “scayt_customerid” parameter:

config.scayt_customerid = 'encrypted-customer-ID';

Note: You can find your long encrypted customer ID in your previous configuration or you may download it from your account page on the webspellchecker.net website. Login using your Customer ID and pass –> Download Configuration file.

You can find more information about SCAYT 3 parameters for CKEditor here.

Before to proceed with the migration steps, you need to define the exact version of TinyMCE editor:

1. Go to Development tools (f.e. F12 in Chrome)
2. Choose Console tab
3. Write after ”>”: tinymce.majorVersion + '.'+ tinymce.minorVersion;
4. Click Enter to see the version of TinyMCE editor

Thus, depending on the version of TinyMCE editor, please follow the next instructions below:

TinyMCE 3.0 and less:

1. Upgrade the version of the TinyMCE WYSIWYG editor to the latest one available (or at least to the version 4.0+). The latest version of TinyMCE (4.6.4) can be downloaded from the TinyMCE website.
2. Download SCAYT 3 plugin for TinyMCE.
3. Unpack the downloaded ZIP archive with the SCAYT plugin
4. Copy the extracted SCAYT folder to the TinyMCE 4 plugins directory (by default: tinymce4\js\tinymce\plugins\). Important: The folder name must be “scayt”.
5. Go further with instractions for TinyMCE 4+.

TinyMCE 4.0+:

Edit your HTML page that contains TinyMCE as follows:

1. Register SCAYT plugin and add it to TinyMCE toolbar:

<script src="/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "textarea#myEditor",
            theme: "modern",
            language: "en",
            plugins: [ "scayt link image table contextmenu" ],
            toolbar: "scayt undo redo | bold italic | alignleft" +
                      "aligncenter alignright alignjustify |" +
                      "bullist numlist | link image",

2. Specify SCAYT settings:

/* SCAYT Parameters */
             scayt_autoStartup: true,
             scayt_customerId: "your_encrypted_customer_id",
             scayt_moreSuggestions:"on",
             scayt_contextCommands:"add,ignore",
             scayt_contextMenuItemsOrder: "control,moresuggest,suggest",
             scayt_maxSuggestions: 6,
             scayt_minWordLength: 4,
             scayt_slang: "en_US",
             scayt_uiTabs: "1,1,1",
             scayt_context_mode: "default",
             scayt_elementsToIgnore: "del,pre",
 
              class_filter : function(cls, rule) {
                return cls == 'scayt-ignore' ? false : cls;
            }
        })

Note: You can find “your_encrypted_customer_id” in your previous configuration or you may download it from your account page on the webspellchecker.net website. Login using your Customer ID and pass –> Download Configuration file.

You can find more information about available parameters on the SCAYT plugin for TinyMCE 4.0+ demo page.

Old (SCAYT 2):

<script type="text/javascript" src="http://svc.webspellchecker.net/scayt26/loader_Textbox.js"></script>

New (SCAYT 3):

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

Old (SCAYT 2):

<script type="text/javascript" src="[spellcheck_host]/spellcheck/lf/scayt/loader_Textbox.js"></script>

New (SCAYT 3):

<script type="text/javascript" src="http(s)://[spellcheck_host]/spellcheck/lf/scayt3/scayt/scayt.js"></script>

Depending on the type of the controls (HTML elements) where SCAYT functionality is embedded and used, please update your configuration as follows below. The instructions below are common for both Cloud and Server versions.

Old (SCAYT 2):

<div contenteditable sc_dojoType="scayt.ui">
    This is an exampl of a sentence with two mispelled words.
    Just type text with misspelling to see how it works.
</div>

New (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: 'customerId_value'
    });
</script>

New (SCAYT 3 - declarative notation):

<script>
    window.SCAYT_CONFIG = {
        spellcheckLang: 'en_US',
 	 serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',       <h1> IFRAME </h1>
        servicePort: '443',
 servicePath: 'spellcheck31/script/ssrv.cgi',
        customerId: 'customerId_value'
    };
</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>

Old (SCAYT 2):

<iframe sc_dojoType="scayt.ui" src="editable_doc.html">

New (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: 'customerId_value'
 
        },
        function(instance) {
            iframeInstance = instance;
        }
    );
</script>

New (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: 'customerId_value'
    };
</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>

Old (SCAYT 2):

<input name="scayt_input" size="50" sc_dojoType="scayt.Input" lang="<language_short_code>" value="This is an exampl of a sentence with two mispelled words.">

New (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: 'customerId_value'
    });
</script>

New (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: 'customerId_value'
    };
</script>
 
<input id="container3" data-scayt-autocreate="true" type="text" value="This is an exampl of a sentence with two mispelled words.">

Old (SCAYT 2):

<textarea name="scayt_textarea" sc_dojoType="scayt.Textarea" scaytConfig.customDictionaryIds = [1,3001]; lang="<language_short_code>" cols="40" rows="7">
    This is an exampl of a sentence with two mispelled words.
    </textarea>

New (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: 'customerId_value'
    });
</script>

New (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: 'customerId_value'
    };
</script>
 
<textarea data-scayt-autocreate="true" id="container4">
    This is an exampl of a sentence with two mispelled words.
</textarea>

SCAYT 3 for Editable controls

You can find more information about SCAYT 3 parameters for Editable controls here. Home