Configuring Server SCAYT plugin for Froala Editor

This guide outlines the main steps that you need to follow in order to integrate and configure the SCAYT plugin with Froala Editor. Steps described below are applicable to the Server version of SCAYT.

1. Initializing Froala Editor

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

2. Adding SCAYT Script and Styles

As soon as Froala Editor is properly set on you page, add a script for the SCAYT plugin and define its styles as follows:

• Go to an official Froala Editor's CDN.
• Find and copy a link to spell_checker.min.js for your version of Froala Editor.
• Find and copy a link to spell_checker.min.css styles file. 
• Add a script to SCAYT plugin to define styles file as in the sample below:

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

3. Creating Froala Editor Instance with Default SCAYT Options

Create a Froala Editor instance and define required SCAYT parameters and options as in the sample below.

$('#editor1').froalaEditor({
    scaytAutoload: true,
    pluginsEnabled: ['spellChecker'],
    toolbarButtons: ['bold', 'italic', 'spellChecker', '|', 'undo', 'redo'],
    toolbarButtonsMD: null,
    toolbarButtonsSM: null,
    toolbarButtonsXS: null,
    scaytOptions: {
        enableOnTouchDevices: false,
        localization:'en',
        extraModules: 'ui',
        spellcheckLang: 'en_US',
        contextMenuSections: 'suggest|moresuggest',
        serviceProtocol: 'http(s)',
        servicePort: 'your_port_number'
        serviceHost:'your_host_name',
        servicePath:'spellcheck/script/ssrv.fcgi',
        contextMenuForMisspelledOnly: true,
        scriptPath: 'http(s)://your_host_name/spellcheck/wscbundle/wscbundle.js'
    }
});

4. Configuring SCAYT

Define additional SCAYT parameters and change the default values, for example, change default spell checking language. You can find a full list of SCAYT API (WProofreader) parameters and possible values on the API page and WProofreader Customization Options section.

Can be also useful:

• Configuring Cloud SCAYT plugin for Froala Editor
• Enabling Settings Dialog in SCAYT plugin for Froala Editor