Page History

This guide outlines the main steps that you need to follow in order to integrate and configure the SCAYT plugin for CKEditor 4. 0+. All the described steps are provided for the Cloud version of SCAYT.

1. Initializing

...

CKEditor 4

Before integrating and configuring the SCAYT plugin, Froala Editor CKEditor should be properly configured in your web application. If you haven't done it yet, please refer to the Froala Editor's Get Started instructions on the Froala Editor official website Example CKEditor Setups on the CKEditor documentation pages. 

2.

...

Configuring SCAYT

...

Plugin

The next step is to define necessary SCAYT parameters and options in the CKEditor config.js file.

• Specify you encrypted customer ID using the scayt_customerid parameter

As soon as Froala Editor is properly set on you page, feel free to jump to this step. You need to add a script for the SCAYT plugin and define its styles as follows.

• Go to an official Froala Editor's CDN: https://cdnjs.com/libraries/froala-editor
• Find and copy a link to spell_checker.min.js for your version of Froala Editor (e.g. 2.7.6)
• Also, you need to find and copy a link to spell_checker.min.css styles file. 
Add script to SCAYT plugin and define styles file as on the example below
• .

<script src='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.6/js/third_party/spell_checker.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.6/css/third_party/spell_checker.min.css" type="text/css" />

3. Creating Froala Editor Instance with Default SCAYT Options

The next step is to create a Froala Editor instance and define necessary SCAYT parameters and options.

$('#editor1').froalaEditor({
    scaytAutoload: true,
    scaytCustomerId: 'encryped_customer_ID',
    pluginsEnabled: ['spellChecker'],
    toolbarButtons: ['bold', 'italic', 'spellChecker', '|', 'undo', 'redo'],
    toolbarButtonsMD: null,
    toolbarButtonsSM: null,
    toolbarButtonsXS: null,
    scaytOptions: {
        enableOnTouchDevices: false,
        enableGrayt: true;
        localization:'en',
        extraModules: 'ui',
        spellcheckLang: 'en_US',
        contextMenuSections: 'suggest|moresuggest',
        contextMenuForMisspelledOnly: true
    }
});

4. Configuring SCAYT

...

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

• Define additional SCAYT parameters and change the default values (e.g. change default spell checking language, etc.).

...

Widget Connector
width 560 url https://www.youtube.com/watch?v=D0ahmVjYBq8&t=1s height 315

...

Can be also useful:

• SCAYT Plugin for CKEditor 4 User Manual
• SCAYT Parameters for CKEditor 4Configuring Server SCAYT plugin for Froala Editor