Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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. 

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

Excerpt

Being an administrator, you can customize WProofreader default settings such as user interface and application behavior described in this guide. 

This guide covers the following topics: 

Table of Contents
maxLevel3
stylenone

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;
  • init () and CONFIG without autoSearch.

For details, refer to Get Started with WProofreader Server (autoSearch) guide and Get Started with WProofreader Cloud autoSearch.

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

Table below summarizes options descriptions and their advantages. 

Option nameDescriptionAdvantages
autoSearch
Note

Please note that with this type of initialization array or number API parameters are not supported. Thus, you cannot modify such parameters as actionItems, suggestionsCount, and moreSuggestionsCount described further in this section.

 Introduction

1.1. Server and Cloud version

In general, WProofreader provides the same functionality for both Cloud and Server versions. The difference is mainly about the location of requests processing: it can be either on WebSpellChecker Cloud hosted on Amazon Web Services (AWS) in data centers in the USA or on your servers such as physical servers, VMs or instances. 

With Cloud version, to access the services, you need to use a special activation key in serviceId parameter. The path to WebSpellChecker Cloud will be obtained from the path to the wscbundle.js file.

For the Server version, you need to instruct WProofreader where the requests will be processed by specifying the following parameters:

  • serviceProtocol
  • serviceHost
  • servicePath
  • servicePort

Example of setting up the Server version of WProofreader with the autoSearch option turned on: 

Code Block
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '443',
        servicePath: 'wscservice/api'
  };
</script>
Code Block
languagejs
themeEmacs
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

For more details, refer to Get Started with WProofreader Server AutoSearch.

Example for setting up the Cloud version of WProofreader with the autoSearch option turned on: 

Code Block
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
	autoSearch: true,
    serviceId: '1:your-service-ID'
   };
</script>
Code Block
languagejs
themeEmacs
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

For more details, refer to Get Started with WProofreader Cloud AutoSearch

1.2. AutoSearch options

Once you have enabled autoSearch by adding autoSearch: true, in configuration, you can specify where the spelling and grammar check should be enabled on your webpage.

By default, WProofreader with autoSearch function turned on will be enabled only in the area in focus. For the areas which are not focused, WProofreader will not be enabled by default until user places a cursor there and starts typing. For details, refer to the following AutoSearch Creation options

  • disableAutoSearchIn lets you disable the autoSearch mechanism by class, id, data attribute name, and HTML elements. Please note that if enableAutoserchIn option is specified, this option will be ignored. 
  • enableAutoSearchIn lets you enable the autoSearch mechanism only for elements with provided class, id, data attribute name or HTML elements type.
Warning

Only one option can be used at the same time. The enableAutoSearch option has higher priority compared with disableAutoSearchIn. If you try using both of them, it can lead to unpredictable behavior and conflicts.

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

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 when the user loads the page, WProofreader is enabled automatically, and it’s 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 and. From the performance point of view, grammar and spelling and style are checked in all controls like in init() which implies performance increase.
CONFIG and init ()

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 well as added into inline data attributes.

Tip

For details, refer to Get Started with WProofreader Cloud AutoS-search and Get Started with WProofreader Server AutoSearch guides.

Below you can find the samples showing how different approaches work.

Example 1 

Initializing WProofreader with autoSearch functionality and defining configuration options in CONFIG:

Code Block
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
	autoSearch:        autoSearch: true,
	lang: 'uk_UA',
	...

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

Example 2 

Initializing WProofreader with autoSearch functionality and defining configuration options using inline data attributes
        disableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'], 
        enableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'],
		... 
    }
</script>

1.2.1 Enable proofreading in inputs

By default, WProofreader is disabled in HTML <input> editable elements due to possible compatibility issues. However, you can change this behavior by using the enableAutoSearchIn option:

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

Example 3

enableAutoSearchIn:['input'],

1.3. AutoStartup 

The autoStartup parameter is set to true by default, meaning that WProofreader starts in the enabled state and starts processing available text for grammar, spelling, and style errors. If, for some reason, you do not want WProofreader to start checking text at once and allow your users to choose when to start, you have an option to start WProofreader in the disabled state. To do so, set the autoStartup value as false, as shown below: Initializing WProofreader using init() method in a defined container on the page and specifying configuration options directly in the init() function:

Code Block
languagejs
themeEmacs
<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 4

autoStartup: false,
Note

When WProofreader starts in a disabled state, the badge is grayed out. To activate it, users need to go to the badge and click the turn on icon.

1.4. Deactivating grammar checking

Grammar checking is enabled by default in WProofreader. If you want to deactivate grammar checking, specify the enableGrammar parameter and set it to false as shown below: Initializing WProofreader using init() method in a defined container(s) on the page and specifying configuration options in CONFIG. You can see two containers, namely, div and textarea which use a single config below:

Code Block
languagejs
themeEmacs
<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 5

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.

Note

Even though we have a CONFIGconfig 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.

Code Block
languagejs
themeEmacs
<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.

Code Block
languagejs
themeEmacs
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

Code Block
languagejs
themeEmacs
<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>

1.1 Server and Cloud Version of WProofreader

In general, WProofreader provides the same functionality for both Cloud and Server versions. The difference is mainly about the location of requests processing: it can be either on WebSpellChecker Cloud hosted on Amazon Web Services (AWS) in data centers in the USA or on your servers such as physical servers, VMs or instances

With Cloud version, to access the services, you need to use a special activation key in service ID parameter. The path to WebSpellChecker Cloud will be obtained from the path to the wscbundle.js file.

For the Server version, you need to instruct WProofreader where the requests will be processed by specifying the following parameters:

  • serviceProtocol
  • serviceHost
  • servicePath
  • servicePort

Example for setting up the Server version of WProofreader with the autoSearch option turned on

Code Block
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '2880',
        servicePath: '/'
  };
</script>
Code Block
languagejs
themeEmacs
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>

For more details, refer to Get Started with WProofreader Server AutoSearch.

Example for setting up the Cloud version of WProofreader with the autoSearch option turned on

Code Block
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
	autoSearch:true,
    serviceId: '1:your-service-ID'
   };
</script>
Code Block
languagejs
themeEmacs
<script type="text/javascript" src="https://svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js"></script>

For more details, refer to Get Started with WProofreader Cloud AutoSearch

1.2 AutoSearch Options

Once you have enabled autoSearch by adding autoSearch: true, in configuration, you can specify where the spelling and grammar check should be enabled on your webpage.

By default, WProofreader with autoSearch function turned on will be enabled only in the area in focus. For the areas which are not focus, WProofreader will not be not enabled by default until user places a cursor there and starts typing. For details, refer to the following AutoSearchCreation options

  • disableAutoSearchIn lets you disable the autoSearch mechanism by class, id, data attribute name and HTML elements. Please note that if enableAutoserchIn option is specified, this option will be ignored. 
  • enableAutoSearchIn lets you enable the autoSearch mechanism only for elements with provided class, id, data attribute name or HTML elements type.
Note

WProofreader will be enabled on all types of editable controls on the page if they are in focus. The only exception is <input> HTML editable element which is disabled and not supported by default due to possible compatibility issues.

Code Block
languagejs
themeEmacs
<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
        disableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'], 
        enableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'],
... 
    }
</script>

1.3 AutoStartup 

The autoStartup parameter is set to true by default meaning that WProofreader starts in enabled state and starts processing available text for grammar, spelling, and style errors.

If for some reason, you do not want WProofreader to start checking text at once and allow your users to choose on when to start , you have an option to start WProofreader in the disabled state. To do so, set the autoStartup value as false, as shown below: 

Code Block
languagejs
themeEmacs
autoStartup: false,
Note

When WProofreader starts in disabled state, and the badge is grayed out. To activate it, users need to go to badge and click the turn on icon.

1.4 Deactivating Grammar Checking

Grammar checking is enabled by default in WProofreader. If you want to deactivate grammar checking, specify the enableGrammar parameter and set it to false as shown below: 

Code Block
languagejs
themeEmacs
enableGrammar: false,
Note

After you have deactivated grammar checking, it becomes disabled for all languages. Only spell check will be performed then.

1.5 Enable Proofreading in Inputs

By default, WProofreader is disabled in HTML <input> editable elements. However, you can change this behavior by using the enableAutoSearchIn option:

Code Block
languagejs
themeEmacs
enableAutoSearchIn:['input'],

 1.5 Disabling Proofreading for Special Cases

In some cases, you may want to disable WProofreader for editable fields. To do so, you can use the disableAutoSearchIn option by passing an array of classes, ids, data attributes or just particular element types:

Code Block
languagejs
themeEmacs
disableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'],

2. Customizing WProofreader User Interface

With WProofreader API you can customize:

  • Suggestions balloon view and commands available;
  • Badge view and commands available; 
  • Settings dialog view and additional preferences; 
  • Actions for Proofread in dialog mode.
Tip

Here you can find the full list of API options and methods available for WProofreader.

2.1 Suggestions Balloon View and Commands

You can customize WProofreader options available in suggestions balloon, for example:

  • Limit the number of suggestions shown to users; 
  • Prevent users from adding words to personal user dictionary;
  • Add more commands to the list of action items, for example, possibility to switch to the Settings dialog. 
Note

The latter is possible only in case of disabled badge. All the action items from the badge are moved to the suggestions balloon then. For details, see Changing the Badge View and Options section. 

2.1.1 Changing the Number of Spelling Suggestions 

By default, WProofreader offers 3 suggestions in its suggestions balloon. As an admin can customize this number using an API option and provide both bigger and smaller number of suggestions. 

For Cloud version, up to 8 suggestions are available. For the Server version, this number can be increased. You can use the  suggestionsCount parameter to increase or decrease the number of spelling suggestions shown to your end users.

Note

Displaying a significant number of suggestions may decrease the speed of the service. 

To display only 2 suggestions:

Code Block
languagejs
themeEmacs
suggestionsCount:2,

2.1.2. Changing Action Items Order and Availability

Use the actionItems parameter to add or hide  the menu items in the suggestions balloon and modify the order of these items. To do so, change the  'addWord', 'ignoreAll', 'settings', 'toggle', 'proofreadDialog' array values accordingly. 

For example, if you want to prevent your users from adding words to their personal user dictionary, remove the  'addWord' value from the array of parameter values:

Code Block
languagejs
themeEmacs
actionItems: ['ignoreAll', 'settings', 'toggle', 'proofreadDialog'],
Note

Removing the addWord from the array of parameter values removes the Add word command for both suggestion balloon and for proofreading in a dialog mode.

To hide Settings dialog for your users, remove the 'settings' from the array of parameter values: 

Code Block
languagejs
themeEmacs
actionItems: ['addWord', 'ignoreAll', 'toggle', 'proofreadDialog'],

2.1.3 Enabling or Disabling the More Suggestions Sub-menu Item

enableGrammar: false,
Note

After you have deactivated grammar checking, it becomes disabled for all languages. Only spell check will be performed then.

2. Customizing user interface

With WProofreader API you can customize:

  • Change the default style theme;
  • Suggestions balloon view and commands available;
  • Badge view and commands available; 
  • Settings dialog view and additional preferences; 
  • Actions for Proofread in dialog mode.
Tip

Here you can find the full list of API options and methods available for WProofreader.

2.1. Change the default style theme

You have an option to change the default style theme using theme option. At the moment, the following themes are available: default, gray, dark, custom.  The gray theme perfectly matches the color palette of modern rich text editors.

Besides, you can adjust CSS styles to make them look native inside your web app. To do this, simply use the custom theme option and write your CSS styles. Find out more in our how-to guide: How to customize the look and feel of WProofreader?

Code Block
languagejs
themeEmacs
theme: 'gray',

2.2. Suggestions pop-up view and commands

You can customize WProofreader options available in the suggestions pop-up. For example:

  • Limit the number of suggestions shown to users; 
  • Prevent users from adding words to the user custom dictionary;
  • Add more commands to the list of action items, for example, the possibility to switch to the Settings dialog. 
Note

The latter is possible only in case of disabled badge. All the action items from the badge are moved to the suggestions pop-up then. For details, see Changing the Badge View and Options section. 

Anchor
changingNumberofSuggestions
changingNumberofSuggestions
2.2.1. Changing the number of spelling suggestions 

By default, WProofreader offers 3 suggestions in its suggestions pop-up. An admin can customize this number using an API option and provide both bigger and smaller number of suggestions. 

For Cloud version, up to 8 suggestions are available. For the Server version, this number can be increased. You can use the suggestionsCount parameter to increase or decrease the number of spelling suggestions shown to your end users.

Note

Displaying a significant number of suggestions may decrease the speed of the service. 

To display only 2 suggestions:

Code Block
languagejs
themeEmacs
suggestionsCount:2,

2.2.2. Changing action items order and availability

Use the actionItems parameter to add or hide the menu items in the suggestion pop-up and modify the order of these items. To do so, change the 'addWord', 'ignoreAll', 'ignore', 'settings', 'toggle', 'proofreadDialog' array values accordingly. 

For example, if you want to prevent your users from adding words to their user custom dictionary, remove the 'addWord' value from the array of parameter values:

Code Block
languagejs
themeEmacs
actionItems: ['ignoreAll', 'ignore', 'settings', 'toggle', 'proofreadDialog'],
Note

Removing the addWord from the array of parameter values removes the Add word command for both suggestion balloon and for proofreading in dialog mode.

To hide Settings dialog for your users, remove the 'settings' from the array of parameter values: 

Code Block
languagejs
themeEmacs
actionItems: ['addWord', 'ignoreAll', 'toggle', 'proofreadDialog'],

2.2.3. Enabling or disabling the more suggestions sub-menu item

By default, the moreSuggestionsCount parameter is set to 0, meaning that additional suggestions, if there are any more than specified in the suggestionsCount parameter are not shown. To display 3 suggestions on the suggestions balloon view and show 5 more suggestions in the More Suggestions section:

Code Block
languagejs
themeEmacs
suggestionsCount:3,
moreSuggestionsCount:5,

Anchor
wproofreaderBadge
wproofreaderBadge
2.3. WProofreader badge

The badge in the lower-right part of the editable area shows the status of the checking process (namely, the number of errors, the process itself – spinner, all checked) and allows to access more options: 

  • Turn on/off the proofreading;
  • Switch to the ‘Proofread in dialog’ mode;
  • Switch to the Settings dialog to manage spell checking options, language, and user custom dictionary;
  • Promptly select a language for check.
  • Enable the global state of the badge.
  • Sets the relative position of the badge in pixels.

2.3.1. Badge view and options

You can change the following badge options:

  • Turn off badge pulsation,
  • Completely remove a badge,
  • Remove some actions from the badge, for example, Settings Image Added, Disable/enable WProofreader Image Added, or Proofread in dialog Image Added.

2.3.2. Turning off badge pulsation
Status
colourRed
titleINACTIVE | 5.24.0

When WProofreader starts, the badge starts pulsing three times to get the user’s attention to the discovered issues. If it turns out to be distracting for the users, you can disable pulsation by setting the disableBadgePulsation parameter as true as shown in the sample belowBy default,  the moreSuggestionsCount parameter is set to 0 meaning that additional suggestions if there are any more than specified in the SuggestionsCount parameter are not shown. To display 3 suggestions on the suggestions balloon view and show 5 more suggestions in the More Suggestions section:

Code Block
languagejs
themeEmacs
suggestionsCount:3,
moreSuggestionsCount:5disableBadgePulsing:true,

2

.2 WProofreader Badge

The orange badge in the lower-right part of the editable area shows the status of the checking process (namely, the number of errors, the process itself – spinner, all checked) and allows to access more options: 

  • Turn on/off the proofreading;
  • Switch to the ‘Proofread in dialog’ mode;
  • Switch to the Settings dialog to manage spell checking options, language and personal user dictionary.

Badge View and Options

You can change the following badge options:

  • Turn off badge pulsation,
  • Completely remove a badge,
  • .3.3. Removing a badge

    If the enableBadgeButton parameter is set false,  part of action items, specifically Settings, Disable/Enable and Proofread in dialog from the badge area will be moved to the suggestions pop-up: 

    Code Block
    languagejs
    themeEmacs
    enableBadgeButton:false,
    Note

    Users will not have an indication of the total number of errors detected in the control. The spinner that shows the grammar and spelling checking process is also disabled.

    2.3.4. Removing actions from badge

    To remove

    Remove

    some actions from the badge, for example, SettingsImage Modified , Disable/enable

    WProofreader

    WProofreader Image Added, or Proofread in dialog Image Added, use the actionItems parameter. An example below shows how you can allow the users to access proofreading in dialog only from the badge: 

    Code Block
    languagejs
    themeEmacs
    actionItems: [ 'proofreadDialog'],

    2.3.5. Enabling language selector in badge

    There is an option available that allows adding a language selector that will be present on the badge. This helps a user switch quickly among languages without going to the settings.

    Image Removed, or Proofread in dialog Image Removed.

    Turning off Badge Pulsation

    When WProofreader starts, the orange badge start pulsing three times to get the user’s attention to the discovered issues. If it turns out to be distracting for the users, you can disable pulsation  setting the disableBadgePulsation parameter as true as shown in the sample below:

    Code Block
    languagejs
    themeEmacs
    disableBadgePulsationenableLanguagesInBadgeButton: true,

    Removing a Badge

    2.3.6. Enable the global state of the badge
    Status
    colourGreen
    titleNEW | 5.24.0

    There is an option available that allows enabling one global badge on the page that aggregates all the suggestions on the page instead of having separate badges for each field.  By default, it’s disabled.If the enableBadgeButton parameter is set false,  part of action items specifically Settings, Disable/Enable and Proofread in dialog from the badge area  will be moved to the suggestions ballon: 

    Code Block
    languagejs
    themeEmacs
    enableBadgeButtonglobalBadge:false,
    Note

    Users will not have an indication of the total the number of errors detected in the control. The spinner that shows the grammar and spelling checking process is also disabpled.

    Removing Actions from Badge

     true,

    2.3.7. Moving global badge 
    Status
    colourGreen
    titleNEW | 5.26.0

    If global badge is enabled it will be placed in the bottom right corner of the page and its position can be regulated using the following options: badgeOffsetX, badgeOffsetY, badgeZIndex.To remove some actions from the badge, for example, SettingsImage Removed , Disable/enable WProofreader Image Removed, or Proofread in dialog Image Removed, use the actionItems parameter. Example below shows how you can allow the users to access proofreading in dialog only from the badge: 

    Code Block
    languagejs
    themeEmacs
    actionItems:badgeOffsetX [ 'proofreadDialog'],
    Note

    Users will not have an indication of the total  number of errors detected in the control. The spinner that shows the grammar and spelling checking process is also disabled.

    2.3 Settings Dialog
    = 20, badgeOffsetY = 20, badgeZIndex = 1000

    2.4. Settings dialog

    The Settings dialog contains the following tabssections: Options, Languages, Dictionaries, General and About. 

    NameActions availableDescription
    Options
    Ignore options

    Predefine some or all available options for application users.

    Specifying the most common cases to ignore spelling checks: 

    • words with all letters capitalized (for example, “SCAYT”), 
    • domain names (for example, “support@webspellchecker.net”),
    • words with mixed case (for example, “WebSpellChecker”), 
    • words with numbers (for example, “2nd”).
    Languages

    Hide the

    tab

    section from your users so that they use only predefined options and set predefined language for all of them.

    Selecting the default language for grammar and spelling checking.
    DictionariesHide the
    tab
    section from your users so that they use only predefined options and set up a predefined user dictionary for
    all of them.Adding and deleting words to/from personal user dictionaries. Connecting and disconnecting selected dictionaries.
    all of them.

    Adding and deleting words to/from personal user dictionaries. Connecting and disconnecting selected dictionaries.

    GeneralPredefine some or all available features for application users.

    Enabling or disabling the following suggestions:

    • spelling suggestions
    • grammar suggestions
    • style guide suggestions
    • correct spelling automatically
    • autocomplete suggestions
    AboutHide the branding information if you have a fully-fledged version of WebSpellChecker.

    Displaying information on WProofreader copyright info and version number.

    Depending on your web app usage preferences or requirements, you can may want to customize the Settings dialog, for example:

    • Hide one of the sections;
    • Change the order of the mostly used tabs first;
    • Disable commands for users so that they have the admin-defined settings and presets only.

    With the settingsSections parameter, you can change the Settings dialog tabs sections visibility and order.  Example below places Options tab after , Languages and Dictionaries tabs and hides General tab

    Code Block
    languagejs
    themeEmacs
    settingsSections: ['languages', 'dictionaries', 'options'],],

    2.4.1. Ignore options  

    Settings on the Options

    tab

    section let you define the following spelling exceptions:

    2.2.1. Options Tab 

    • All caps words like 'EXAMPL'.
    • Domain names like 'http://example.com'.
    • Words with mixed case like 'eXaMpL'.
    • Words with numbers like 'exampl7'. 

    You can change the default behavior using the following parameters:

    Code Block
    languagejs
    themeEmacs
    ignoreAllCapsWords: true,
    ignoreDomainNames: true,
    ignoreWordsWithMixedCases: true,
    ignoreWordsWithNumbers: true,

    To disable ignoring, set the value of the desired option as false.

    2.

    2.2. Languages Tab

    4.2. Language

    The Language section of the Settings dialog contains the list of available languages for spelling and grammar checking and enables users to set the default checking language.

    To set the

    You can set predefined language for all application users, use the lang parameter and specify the desired language short code as shown in the Default Language for all Users section.

    To hide the Language section from in the Languages tab and hide it from your users so that they cannot modify the selected language using , use the settingsSections parameter as shown below:

    Code Block
    languagejs
    themeEmacs
    settingsSections: ['options', 'dictionaries', 'about'],

    2.

    2

    4.3.

    Dictionaries Tab

    Customizing Dictionaries tab User Interface

    These are some options for altering Dictionaries tab user interface elements and features:

    1. Hiding Dictionary tab at all.
    2. Hiding or removing Preferences section on the Dictionary tab to prevent users from adding/changing/removing the dictionary.
    3. Setting a predefined dictionary for all users.

    Hiding Preferences Section on the Dictionary Tab

    The Preferences section of the Dictionaries tab contains action items and buttons for managing user dictionaries specifically: create a new dictionary, connect/disconnect existing dictionary, rename and delete a dictionary.

    You may need to hide or remove the Preferences section when users have a company-wide predefined dictionary and you do not want your users make any changes to it except adding or removing words. For details, refer to setting up WProofreader Dictionaries tab section.

     To disable the dictionary preferences UI for your users, specify the disableDictionariesPreferences option as true:

    Code Block
    languagejs
    themeEmacs
    disableDictionariesPreferences: true,

    Removing Dictionaries Tab

    You may want to remove the Dictionaries tab from user interface in the following cases: 

    • Users can only add new words using the Add word command from the suggestion balloon or when proofreading in a dialog mode. The dictionary itself cannot be deleted or modified.
    • There is no predefined dictionary and you want to prevent storing the dictionaries on a server. Instead all the words are saved in users browsers local storage.  
    Tip

    Instead of completely removing the Dictionaries tab, consider disabling only the user interface elements responsible for creating, deleting, renaming, and connecting a dictionary as in the examples above and when allowing your users to see and manage words added to the dictionary.

    Note

    If the users have not saved the words added to the dictionary on the server and use local storage instead, these words become inaccessible when switching to a different browser or a computer.

    Use the sample below:

    Code Block
    languagejs
    themeEmacs
    settingsSections: ['languages', 'options'],
    Info

    For details refer to Configuring Server Personal Dictionaries  and Configuring Cloud Personal User Dictionaries, Personal User Dictionary Interface in WProofreader sections and FAQ section.

    Note

    If users try to use a different browser, they won't be able to access the dictionary. If there is no Dictionary tab in the Settings dialog, they cannot remove some words they might have added by mistake.

    2.2.4. About Tab

    Dictionaries

    Customizing Dictionaries user interface

    These are some options for altering Dictionaries user interface elements and features:

    1. Hiding Dictionary view at all.
    2. Hiding or removing the Preferences section on the Dictionary view to prevent users from adding/changing/removing the dictionary.
    3. Setting up a predefined dictionary for all users.
    Hiding preferences section on the Dictionary tab

    The Preferences section of the Dictionaries tab contains action items and buttons for managing user dictionaries, specifically: create a new dictionary, connect/disconnect existing dictionary, rename and delete a dictionary.

    You may need to hide or remove the Preferences section when users have a general user dictionary and you do not want your users to make any changes to it except adding or removing words. 

     To disable the dictionary preferences UI for your users, specify the disableDictionariesPreferences option as true:

    Code Block
    languagejs
    themeEmacs
    disableDictionariesPreferences: true,
    Removing Dictionaries tab

    You may want to remove the Dictionaries tab from user interface in the following cases: 

    • Users can only add new words using the Add word command from the suggestion balloon or when proofreading in a dialog mode. The dictionary itself cannot be deleted or modified.
    • There is no predefined dictionary and you want to prevent storing the dictionaries on a server. Instead all the words are saved in users browsers local storage.  
    Tip

    Instead of completely removing the Dictionaries tab, consider disabling only the user interface elements responsible for creating, deleting, renaming, and connecting a dictionary as in the examples above and when allowing your users to see and manage words added to the dictionary.

    Note

    If the users have not saved the words added to the dictionary on the server and use local storage instead, these words become inaccessible when switching to a different browser or a computer.

    Use the sample below:

    Code Block
    languagejs
    themeEmacs
    settingsSections: ['languages', 'options'],
    Info

    For details refer to Configuring Server Personal Dictionaries  and Configuring Cloud Personal User Dictionaries, Personal User Dictionary Interface in WProofreader sections and FAQ section.

    Note

    If users try to use a different browser, they won't be able to access the dictionary. If there is no Dictionary tab in the Settings dialog, they cannot remove some words they might have added by mistake.

    2.4.4. General section
    Status
    colourYellow
    titleUpd | 5.29.1

    Starting WebSpellChecker version 5.29.1.0, your end-users will be able to hide spelling (red underlines), grammar (blue underlines) or style guide (yellow underlines) suggestions using the toggle switch on the WProofreader interface. Previously it was available for Correct spelling automatically and Autocomplete suggestions.

    2.4.5. About tab

    Note

    You can remove the About tab of WProofreader dialog and branding information if you have purchased a Custom or a Server version of WProofreader package. 

    To remove the branding of WProofreader, namely the title on the UI of the product and About tab with copyrights and logo, set the removeBranding parameter value true as shown in the code sample below: 

    Code Block
    languagejs
    themeEmacs
    removeBranding:true,
    Note
    You can remove the About tab of WProofreader dialog and branding information if you have purchased a Custom or a Server version of WProofreader package. 

    2.

    4

    5. Actions for

    Proofreading

    proofreading in a

    Dialog

    dialog

    Actions available for configuring WProofreader dialog mode are the same as for the suggestions balloon, namely: 

    • Hiding or turning off descriptions of discovered grammar problems;
    • Changing the number of suggestions;
    • Hiding some actions, for example, Add to dictionary or Ignore All;
    • Preventing users from switching to the Settings dialog mode.

    You can turn off descriptions for discovered grammar issues both in suggestions balloon and WProofreader dialog. To do so, set the value disableProblemDescription as true.

    Code Block
    languagejs
    themeEmacs
    disableProblemDescription:true,

    To hide the Add to dictionary command, specify the actionItems parameter values as shown in the sample below:   command, specify the actionItems parameter values as shown in the sample below:  

    Code Block
    languagejs
    themeEmacs
    actionItems: ['ignoreAll', 'settings', 'toggle', 'proofreadDialog'],

    To hide or remove the Settings icon so that the users cannot navigate and change WProofreader settings, exclude the settings value from the array of parameter values:

    Code Block
    languagejs
    themeEmacs
    actionItems: ['ignoreAll', 'settings', 'toggle', 'proofreadDialog'],

    To hide or remove the Settings icon so that the users cannot navigate and change WProofreader settings, exclude the settings value from the array of parameter values:

    Code Block
    languagejs
    themeEmacs
    actionItems: ['ignoreAll', 'toggle', 'proofreadDialog'],

    3. Languages and Dictionaries Settings

    3.1.  Default Language Options

    The default language setting for WProofreader users is American English (en_US). But being the administrator, you can change this default language for all users. 

    Besides the default languages list, you can have  more dictionaries to extend the linguistics coverage. Here are available options: 

    ,

    3. Languages and dictionaries settings

    Anchor
    defaultLanguageOptions
    defaultLanguageOptions
    3.1. Default language options

    The default language setting for WProofreader users is American English (en_US). But being the administrator, you can change this default language for all users. 

    Besides the default languages list, you can have  more dictionaries to extend the linguistics coverage. Here are available options: 

    • Auto Detect language. This is a feature that auto-detects the input language and does the check using the proper language. Its support covers around 80 languages. This feature is available in all paid plans except the Basic one. To enable it by default for all users, set 'auto' as a default language (see details below).
    • Additional languages list including 150Additional languages list including 100+ languages available with WebSpellChecker paid version. No additional configuration is required.
    • Specialized languages such as legal and medical are not included into a default bundle and can be configured on demand for your daily used professional terms.

    For details, contact WebSpellChecker support team

    3.2. Default

    Language

    language for all

    Users

    users

    You can specify the default language for all WProofreader users using the lang option. For example, if you  you set the lang: 'de_DE', German locale is specified for all users. 

    Code Block
    languagejs
    themeEmacs
    lang: 'de_DE',

    To enable the language locale, be sure to use the proper language code. For details, refer to the supported language short codes list.

    Note

    Users can modify the default language locale using the Languages tab of the Settings dialog but the locale they have selected will be used until they reload the browser. After reloading the browser a language specified by the administrator is used again. 

    3.3

    User Interface Localization Language

    . User interface localization language

    You can change WProofreader interface localization to match the locale preferences. The default interface localization language is American English. interface localization language is American English.  All the available short codes for localization are available in the description of localization parameter in API options.

    For example, to set German language as the localization option in WProofreader, use the localization parameter as in sample below: 

    Code Block
    languagejs
    themeEmacs
    localization: 'de',

    3.4. Predefined

    User Dictionary 

    user dictionary 

    To activate one dictionary common for all users, specify the userDictionaryName  parameter by providing the dictionary name. After that, all words added by users via the Add word command are added to this particular dictionary.  

    Code Block
    languagejs
    themeEmacs
    userDictionaryName:'user_dictionary_name',
    Info

    If you have authentication enabled in your web app, you can predefine certain dictionaries for specific users using this approach.

    Note

    Users can add words to a dictionary for spelling suggestions only.

    3.5. Extending the

    List

    list of

    Dictionaries

    dictionaries

    If you want to use some dictionaries different from the default ones, refer to the list of additional language dictionaries available on our web site and contact our sales team for purchasing details. 

    3.6. Custom

    Dictionaries

    dictionaries

    Custom dictionaries allow creating company-wide dictionaries and extending the vocabulary of the standard dictionary with words specific to industry or domain. To configure a global custom dictionary in WProofreader, use the customDictionaryIds parameter and add a string with required dictionaries IDs which should be separated by commas:

    Code Block
    languagejs
    themeEmacs
    customDictionaryIds: '100694', '100695',

    In the example above,   ID is the unique dictionary ID will be assigned to your custom dictionary. For details on setting global custom dictionaries for Server version, refer to Configuring Server Global Custom Dictionaries section, namely: 

    For details on setting custom dictionaries for Cloud version, refer to Configuring Cloud Custom Dictionaries guide.

    4. Miscellaneous

    Options 

    options 

    4.1. Minimal

    Word Length

    word length

    By default, WProofreader enables spell check starting with 3 and more letters per word. You can customize this option using the minWordLength API parameter parameter

    Code Block
    languagejs
    themeEmacs
    minWordLength: 2,

    After you have used this option, the words which have two (2) and more letters in them will be spell checked. 

    4.2 Excluding Elements From Checking

    checked. 

    4.2. Excluding elements from checking

    There are a list of options such as ignoreElementsignoreClasses and ignoreAttributes that help to manage where the text checking should not be done. 

    Use the ignoreElements parameter to instruct WProofreader not to check the  the HTML elements in the text such as, typeface types, links, tables and others. By default, links or text within the <a> tag are ignored as well as <style> and <script> tags.

    You can additionally choose to ignore spelling and grammar checking  in certain web page markup elements , for example, headings tags and othersby classes or attributes.

    In example below, <table> tag text inside table elements, elements containing specified class or attribure will be skipped during checking:

    Code Block
    languagejs
    themeEmacs
    ignoreElements: 'table',
    ignoreClasses: ['ignore-checking'],
    ignoreAttributes: ['data-wsc-ignore-checking']

    4.3. Disabling

    Proofreading

    proofreading in As You Type

    Mode

    mode

    Proofreading during typing in the so called ‘as you type mode’ is enabled by default. You can disable this mode using the proofreadAsYouType parameter so that thus proofreading becomes possible only in dialog mode. To do so, change  the value of proofreadAsYouType parameter to false: 

    Code Block
    languagejs
    themeEmacs
    proofreadAsYouType: false,

    After disabling proofread as you type mode, users can access proofreading by initiating WProofreader dialog mode from the badge by clicking Proofread in dialog icon.