Versions Compared

Old Version 3

changes.mady.by.user Julia Shaptala

Saved on

compared with

New Version 4

changes.mady.by.user Julia Shaptala

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 instructions for TinyMCE 4+.

TinyMCE 4.0+

...

Edit your HTML page that contains TinyMCE as follows:

...

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

3. How to migrate from SCAYT 2 to SCAYT 3 for Editable Controls

1. Change SCAYT application URL:

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

2. Update SCAYT initialization in controls.Depending on the type of the controls (HTML elements) where SCAYT functionality is embedded and used, please update your configuration as follows. 

3.1. Contenteditable DIV Element

Code Block
languagejs
themeEmacs
<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>


Code Block
languagejs
themeEmacs
<script>
    window.SCAYT_CONFIG = {
        spellcheckLang: 'en_US',
 	    serviceProtocol: 'https',
        serviceHost: 'svc.webspellchecker.net',
        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>

3.2. Contenteditable IFRAME Element

Code Block
languagejs
themeEmacs
<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>


Code Block
languagejs
themeEmacs
<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>

3.3. Contenteditable INPUT Element

Code Block
languagejs
themeEmacs
<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>


Code Block
languagejs
themeEmacs
<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.">

3.4. Contenteditable TEXTAREA Element

Code Block
languagejs
themeEmacs
<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>


Code Block
languagejs
themeEmacs
<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>

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