You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

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 Froala Editor with WProofreader. 

For details on initializing WProofreader, refer to initialization guide.

Step 1. Initialize Froala Editor

Before integrating and configuring WProofreader, make sure Froala Editor is properly configured in your web application. To initialize Froala Editor, follow the steps described in the Get Started guide.

Step 2. Initialize WProofreader

Choose one of the options below how to enable spelling and grammar checking functionality of WProofreader in Froala Editor v3:

  • Using autoSearch
    When using this method, you need a CONFIG and a wscbundle script.

    <script>
        window.WEBSPELLCHECKER_CONFIG = {
    		autoSearch:true,
    		lang: 'uk_UA',
    		...
    	};
    </script>
    
    <script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

    After setting up the autoSearch, WProofreader will be enabled as soon as the editable container with Froala Editor is in focus. 

  • Using init() method

    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>

    When using this method, WProofreader will be started on the Froala Editor load.

Step 3. Further Actions

After you have initialized WProofreader in Froala Editor, you can customize WProofreader options, its user interface, and behavior.


Still have a question?

Please feel free to contact our technical team if you are having any difficulties with the configuration. 

  • No labels