1. Initialization Options

There are several  options letting you initialize WProofreader functionality in your web app, namely using: 

• autoSearch (config and inline data attributes);
• init() method.

The WEBSPELLCHECKER_CONFIG can be added in a script or loaded from the file as mentioned in Get Started with WProofreader Server (autoSearch) guide for Server version and Get Started with WProofreader Cloud autoSearch.

After you have initialized WProofreader, you can customize the above-mentioned settings using WebSpellChecker API.

Below you can find the samples showing how different WProofreader initialization approaches work depending on the integration and expected launch behavior.

1.1. Initializing using autoSearch 

The autoSearch feature enables detecting new editable fields on the page and proofreading the text they contain automatically on hover selection. If you choose this option, WProofreader is enabled in the selected WYSIWYG editor or HTML editable control, and no additional actions are required. 

• autoSearch is useful when your web page has multiple controls as you can add one script which is enabled in the areas in focus automatically compared with creating an init() method for each control. From a performance point of view, autoSearch also has a better performance as the grammar and spelling and style are checked only in active area compared with checking in all controls like in init(). 
• autoSearch for dynamic page where some fields can be hidden or added at a certain point is enabled automatically and releases the memory helping to avoid possible  memory leaks. 

Initialization using inline attributes is suitable and useful if you want to have a single script with basic options definitions. 

Example A: Initializing WProofreader with autoSearch and configuration options in CONFIG 

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

Example B: Initializing WProofreader with autoSearch and defining configuration options using inline data attributes

This is an example of WProofreader initialization with autoSearch. All the configuration options are defined using inline data attributes.

<script
	data-wsc-autosearch="true"
	data-wsc-lang="uk_UA"
	...
    src="https://your_host_name/wscservice/wscbundle/wscbundle.js">
</script>

Example 2: Initializing WProofreader using autoSearch and init() method

When you initialize WProofreader using this method, in init () method we declare the container where WProofreader should be started. The options are to be obtained from the settings.

Initializing WProofreader using init() method in a defined container (div element) on the page and specifying configuration options directly in the init() function:

<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<div contenteditable id="container1">
This sampl text is aimed at demonstrating the work of WProofreader in a contenteditable div element.
</div>
  
<script>
    var instance1 = WEBSPELLCHECKER.init({
	container: document.getElementById("container1"),
	lang: 'uk_UA',
	...
	    });
</script>

1.2: Initialization using init() method

When you initialize WProofreader using this method, you declare the container where WProofreader should be started. The options are to be obtained from the settings.

The init() method is a reasonable choice when you clearly know in which control you want to initialize in WProofreader. More than that you are aware of your page controls, and additional controls do not appear dynamically. 

• If your web application page has several textareas where you want to initialize WProofreader, as soon as the user loads the page, WProofreader is enabled automatically. It is not required to select the area to enable grammar and spelling check in it compared with autoSearch method. 

With dynamic web page load using init() method, administrator needs to be monitor when it’s necessary to start WProofreader.

Example 1: Initializing WProofreader in HTML element using init() method

Initializing WProofreader using init() method in a defined container (div element) on the page and specifying configuration options directly in the init() function:

<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<div contenteditable id="container1">
This sampl text is aimed at demonstrating the work of WProofreader in a contenteditable div element.
</div>
  
<script>
    var instance1 = WEBSPELLCHECKER.init({
container: document.getElementById("container1"),
lang: 'uk_UA',
...
	    });
</script>

Example 2: Initializating WProofreader in multiple HTML elements using init() method 

Initializing WProofreader using init() method in a defined container(s) on the page and specifying configuration options in WEBSPELLCHECKER_CONFIG is shown in the sample below. You can see two containers, namely, div and textarea which use a single configuration script:

<script>
    window.WEBSPELLCHECKER_CONFIG = {
	lang: 'uk_UA',
	...
    };
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<div contenteditable id="container1">
This sampl text is aimed at demonstrating the work of WProofreader in a contenteditable div element.
</div>

<script>
    var instance1 = WEBSPELLCHECKER.init({
container: document.getElementById("container1"),
	    });
</script>

<textarea id="container2" type="text">This sampl text is aimed at demonstrating the work of WProofreader in a textarea textform element.
</textarea>
  
<script>
    var instance2 = WEBSPELLCHECKER.init({
container: document.getElementById("container2"),
	    });
</script>

Example 3: Initializing WProofreader in HTML elements using data-wsc-autocreate

This is an example of WProofreader initialization in HTML editable elements and elements with  and contenteditable attribute set to true using data-wsc-autocreate="true". The configuration options are to be defined separately in WEBSPELLCHECKER_CONFIG. This approach is similar to initializing WProofreader using init() method.

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        lang:’uk_UA’,       
    };
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<div contenteditable data-wsc-autocreate="true">
This sampl text is aimed at demonstrating the work of WProofreader in a plain textarea element.
</div>
<textarea type="text" data-wsc-autocreate="true" data-wsc-lang="es_ES">This sampl text is aimed at demonstrating the work of WProofreader in a textarea textform element.
</textarea>

Example 4: Initializing WProofreader in WYSIWYG editors using init() method

There is an option to explicitly initialize WProofreader in such Rich text editors as Froala Editor 3, CKEditor 4, and CKEditor 5 using init() method. However, it is strongly recommended to use this method with autoSearch and autoDestroy options in WEBSPELLCHECKER_CONFIG.

Turn on autoDestroy parameter to monitor the state of the WEBSPELLCHECKER instance and handle its destroy after removal (deleted or hidden) of an editable container from the page. At the same time enabled autoSearch parameter will restore an instance when it is needed. It can be useful for example, when switching to the code editing mode in the editor, WEBSPELLCHECKER instance must be deleted and then restored after returning back to the editor. Thus, it is the autoSearch that restores it.

Initializing WProofreader using init() in Froala Editor

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

<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
    window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
autoDestroy: true,
...	
    };
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<script>
    new FroalaEditor('#froala-editor', {
        events: {
            'initialized': function() {
                WEBSPELLCHECKER.init({
                    container: this.el
                });
            }
        }
    });
</script>

Initializing WProofreader using init() in CKEditor 4

<div id="ckeditor4-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>
<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
    window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
autoDestroy: true,
...	
    };
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

<script>
CKEDITOR.on('instanceReady', function(event) {
    WEBSPELLCHECKER.init({
        container: event.editor.window.getFrame().$
    });
});
</script>

Initializing WProofreader using init() in CKEditor 5

<div id="ckeditor5-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>
<!-- Include the WEBSPELLCHECKER_CONFIG variable. -->
<script>
    window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
autoDestroy: true,
...	
    };
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

<script>
ClassicEditor
    .create(document.querySelector('#editor5'))
    .then(editor => {
        WEBSPELLCHECKER.init({
            container: editor.ui._editableElements.get('main')
        });
    });
</script>