WProofreader add-on for rich text editors enables grammar and spell check, combining spelling and grammar suggestions while you type or work with your text in a floating dialog.
Its auto-searching feature enables detecting new editable fields on the page and proofreading the text they contain automatically on hover selection. No additional actions or plugins are required for enabling WProofreader in a specific WYSIWYG editor or HTML editable element. A single configuration applies to almost all editors and controls. Here is the list of WProofreader supported integrations.
This guide outlines the main steps that you need to follow for initializing WProofreader in the 3rd version of Froala Editor. All the described steps are provided for the Cloud version of WProofreader.
1. Obtain service ID
Sign up for the trial version to get started with WProofreader Cloud. Once you have subscribed, you will receive an email with your service ID, an activation key, required for the WProofreader service activation.
If you already have one, you can skip this step.
2. Initialize Froala Editor
Before integrating and configuring WProofreader, make sure that Froala Editor is properly configured in your web application. To initialize Froala Editor, follow the steps described in the Get Started guide.
3. Initialize WProofreader
Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in Froala Editor.
Option A. Using autoSearch (the easiest)
When using this method, you need a CONFIG and a wscbundle.js script. After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with Froala Editor is in focus. Follow the steps described in the Get Started with WProofreader Cloud (autoSearch).
Option B. Using init() method
When using this method, WProofreader will be started on the Froala Editor load.
Initializing WProofreader using init() in Froala Editor
<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch:true,
autoDestroy:true,
...
};
</script>
<script type="text/javascript" src="https://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<div id="froala-editor">
<p>These are an examples of a sentenceswith two mispelled words and grammar problems. Just type textwith misspelling to see how it works.</p>
</div>
<script>
new FroalaEditor('#froala-editor', {
iframe:true,
events: {
'initialized':function() {
WEBSPELLCHECKER.init({
container:this.$iframe ?this.$iframe[0] :this.el
});
}
}
});
</script>
4. Activate service
To activate the Cloud version of WProofreader, you are required to add serviceId option to the CONFIG with your activation key and specify the correct path to the wscbundle.js file on our Cloud.
serviceId:'your-service-ID'
Update the path to WProofreader wscbundle.js file in case of the Cloud version as follows:
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>
5. Remove other spellcheckers
If you used to have other spellcheck tools or SCAYT plugin for Froala Editor, please make sure you removed everything to avoid any conflicts or confusion. To identify the SCAYT product, please search for the following key words: SCAYT, spell_checker.min.js, spell_checker.min.css, scaytCustomerId, scaytAutoload, pluginsEnabled: ['spellChecker'].
6. Further actions
After initialization, you can customize WProofreader options, its user interface, and behavior using WProofreader customization options. More options and methods for advanced customization are available in API docs.
You can also see the demo of Froala Editor integration on our website.
