Initializing WProofreader in Froala Editor 3

This guide outlines the main steps that you need to follow for initializing WProofreader in Froala Editor. 

1. 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.

2. 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

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. Check the sample below or follow the steps described in the Get Started with WProofreader Server (autoSearch) section.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
		autoSearch: true,
		lang: 'en_US', // set the default language 
		...
	};
</script>

<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

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 sentences with two mispelled words and grammar problems. Just type text with 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>

3.  Specify Additional Server Parameters

Make sure you have specified the following server-specific options in CONFIG, which are instructing where spelling and grammar checking requests will be processed:

serviceProtocol: 'https',
serviceHost: 'your_host_name',
servicePort: '443',
servicePath: 'virtual_directory/api' //by default the virtual directory name is wscservice

4. Further Actions

After you have initialized WProofreader in Froala Editor, you can customize WProofreader options, its user interface, and behavior using WProofreader customization options. You can also see the demo of Froala Editor integration on our website.