SCAYT plugin for Froala Editor is no longer supported and has been replaced with the WProofreader product. Refer to the Initializing WProofreader in Froala Editor 3 guide to find out how easily enable spelling and grammar checking functionality of WProofreader in Froala Editor.
This guide outlines the main steps that you need to follow in order to integrate and configure the SCAYT plugin for Froala Editor. All the described steps are provided for the Cloud version of SCAYT.
Good to know:
- SCAYT is an integrated spell and grammar checking solution in Froala Editor starting version 2.6.0.
- The paid services allow the customers to get rid of the banner ad, lift the usage limitations and get the extra functionality and languages.
- To get started with either free or paid version of SCAYT for Froala Editor, it is required to subscribe to the Cloud SCAYT services. On the subscription, you will receive an email with your encrypted customer ID, an activation key, that is required for the SCAYT service activation.
1. Initialize 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, please refer to the Froala Editor's Get Started instructions on the Froala Editor official website.
2. Add SCAYT Script and Styles
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
- 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/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. Create 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. Configure SCAYT
You have also an option to define additional SCAYT parameters in scaytOptions and change the default values (e.g. change default spell checking language, etc.). You can find a full list of SCAYT API parameters and possible values on the SCAYT API page.
Still Need a Help?
If you are still experiencing some difficulties with configuring SCAYT plugin for Froala Editor, please check our training video on our official YouTube channel. It will guide you through all configurations steps and demonstrate how to enable a comprehensive spell and grammar checking tool in Froala Editor.
