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.
After you have initialized WProofreader, you can customize the above-mentioned settings using WebSpellChecker API.
For details, refer to Get Started with WProofreader Cloud AutoSearch and Get Started with WProofreader Server AutoSearch guides.
Below you can find the samples showing how different approaches work.
Example 1: Initializing WProofreader 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() for each control. From the 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.
When you initialize WProofreader using this method, you need to declare the container where WProofreader should be started in init () method. The options are to be obtained from the settings.
Please note that in case of initialization using attributes, a number of API parameters are not supported. Thus, you cannot modify such parameters as actionItems, suggestionsCount, and moreSuggestionsCount described further in this section. When initializing WProofreader using CONFIG, all options are supported.
Scenario A: Initializing WProofreader with autoSearch functionality and defining 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>
Scneario B: Initializing WProofreader with autoSearch functionality and defining configuration options 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.
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 text areas 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.
Initializing WProofreader using init() method in a defined container 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 3: Initialization using init() method in a defined container
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.
The CONFIG can be added in a script or loaded from the file as mentioned in Get Started with WProofreader Cloud AutoS-search and Get Started with WProofreader Server AutoS-search guides as well as added into inline data attributes.
Initializing WProofreader using init() method in a defined container(s) on the page and specifying configuration options in 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 4: Initializing WProofreader by redefining options priority
Initializing WProofreader in HTML controls using data-wsc-autocreate="true" and specifying configuration options in CONFIG. This approach is similar to initializing WProofreader using init() method.
Even though we have a CONFIG where we defined Ukrainian as a priority the language (Ukraine), the language for textarea will be taken from the data-wsc-lang="es_ES" setting. It will have higher priority and, thus, will rewrite the CONFIG settings in the sample below.
<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>
Initializing WProofreader using init() method using autoSearch and autoDestroy in WYSIWYG editors such as Froala Editor 3, CKEditor 4 and CKEditor 5 and specifying the options in CONFIG.
new FroalaEditor('#froala-editor', {
events: {
'initialized': function() {
WEBSPELLCHECKER.init({
container: this.el
});
}
}
});
</script>```
CKEditor 4:
```CKEDITOR.on('instanceReady', function(event) {
WEBSPELLCHECKER.init({
container: event.editor.window.getFrame().$
});
});```
CKEditor 5:
```ClassicEditor
.create(document.querySelector('#editor5'))
.then(editor => {
WEBSPELLCHECKER.init({
container: editor.ui._editableElements.get('main')
});
});``
Froala Editor code sample:
<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>
Example 5: Using init() method with autoSearch and autoDestroy in WYSIWYG editors
When initializing WProofreader using init() method with autoSearch and autoDestroy in WYSIWYG editors such as Froala Editor 3, CKEditor 4, and CKEditor 5 and specifying the options in CONFIG, the autoDestroy parameter turns on/off the auto-destroy functionality of a WebSpellChecker instance. By default, it is enabled for WProofreader initialized using autoSearch. It can be used to avoid monitoring the state of the instance and handling its destroying after removal of an editable container from the page.
It can be useful for example, when we have created our instance, and later we don’t need to worry to remove it in certain cases. Deleting an instance from the page takes place when an edited element is deleted or hidden. When switching to the code editing mode in the editor we need to delete our instance and then to restore it after returning back to the editor. Thus, it is the autoSearch that restores it.
new FroalaEditor('#froala-editor', {
events: {
'initialized': function() {
WEBSPELLCHECKER.init({
container: this.el
});
}
}
});
</script>```
CKEditor 4:
```CKEDITOR.on('instanceReady', function(event) {
WEBSPELLCHECKER.init({
container: event.editor.window.getFrame().$
});
});```
CKEditor 5:
```ClassicEditor
.create(document.querySelector('#editor5'))
.then(editor => {
WEBSPELLCHECKER.init({
container: editor.ui._editableElements.get('main')
});
});``
Froala Editor example:
<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>
