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

This guide covers the following topics: 

• Number of spelling suggestions, 
• WProofreader dialog user interface elements and orange badge, 
• Settings dialog;
• Default language settings;
• Dictionaries features such as predefined dictionaries available for all system users and Dictionaries tab;
• About tab of WProofreader Settings dialog by removing WProofreader brand name;
• autoSearch settings.

WProofreader 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 WProofreader API. You can also configure  some parameters using WProofreader API for grammar, spelling check, and WProofreader dialog user interface.

autoSearch description and advantages

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. 

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.

autoSearch is 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. 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(). 

Another advantage of autoSearch 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() method description and advantages

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. 

Consider the following situation when 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, 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.

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 server or using other Cloud services providers. 

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

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

• serviceProtocol
• serviceHost
• servicePath
• servicePort

Example for setting up the Server version of WProofreader: 

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
        enableGrammar: true,
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '2880',
        servicePath: '/'
  };
</script>

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

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

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
        serviceProtocol: 'https',
        serviceHost: 'your_host_name',
        servicePort: '443',
        servicePath: 'wscservice/api'
  };
</script>

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

<script>
    window.WEBSPELLCHECKER_CONFIG = {
	autoSearch: true,
    serviceId: '1:your-service-ID'
   };
</script>

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

<script>
    window.WEBSPELLCHECKER_CONFIG = {
        autoSearch: true,
        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:

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: 

autoStartup: false,

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: 

enableGrammar: false,

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.

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?

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. 

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.

To display only 2 suggestions:

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:Example for setting up the Cloud version of WProofreader: 

<script>
    window.WEBSPELLCHECKER_CONFIG = {
	autoSearch:true,
    serviceId: '1:j47ai-r4SLN1-dG5xP1-UuonU-WqXUZ3-0bzqZ1-QI8OP1-bQZcb1-KQuPE3-nWbcY3-aA4Zk4-wT9'
   };
</script>

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

actionItems: ['ignoreAll', 'ignore', 'settings', 'toggle', 'proofreadDialog'],

To hide Settings dialog for your users, remove the 'settings' from the array of parameter values: Example of specifying a path to wscbundle.js:  

<script type="text/javascript" src="[path_to_config]/wscbundle_config.js">
</script>

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.

The CONFIG can be added in a script or loaded from the file as mentioned in Get Started with WProofreader Cloud Auto-search  and Get Started with WProofreader Server Auto-search guides as well as added into inline data attributes.

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

AutoStartup 

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

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:

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
colour Red title INACTIVE | 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 below:

disableBadgePulsing:true,

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

autoStartupenableBadgeButton: false,

1.4 Deactivating Grammar Checking

2.3.4. Removing actions from badge

To remove some actions from the badge, for example, SettingsImage Added , Disable/enable 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 badgeGrammar 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: 

enableGrammaractionItems: false,

Customizing WProofreader User Interface

With WProofreader API you can customize:

• Suggestions balloon;
• Application  Settings and commands available in suggestions  balloon and the orange badge area;
• Actions for spelling and grammar checking for proofreading in dialog mode;
• Actions for spellcheck available in as you type mode such as Add word and Ignore all;
• Displaying or hiding grammar tips for grammar errors; 
• Branding and copyright information displayed on the About tab.

Suggestions Balloon

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. 

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

[ '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.

enableLanguagesInBadgeButton: true,

2.3.6. Enable the global state of the badge

Status
colour Green title NEW | 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.

globalBadge: true,

2.3.7. Moving global badge 

Status
colour Green title NEW | 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.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:

actionItems: ['ignoreAll', 'settings', 'toggle', 'proofreadDialog'],

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

actionItems: ['addWord', 'ignoreAll', 'toggle', 'proofreadDialog'],

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

To display only 2 suggestions:

suggestionsCount:2,

2.1.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:

suggestionsCount:3,
moreSuggestionsCount:5,

2.2 Settings Dialog Tabs

badgeOffsetX = 20, badgeOffsetY = 20, badgeZIndex = 1000

2.4. Settings dialog

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

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

• Hide one of the sections;
• Disable commands for users so that they have the admin-defined settings and presets only.

Depending on your web app usage preferences or requirementsWith the settingsSections parameter, you can customize change the Settings dialog tabs availability and modify its user interface elements.With the settingsSections parameter you can change the Settings dialog tabs visibility and order, i.e hide one of the sections, change the order of the mostly used tabs first or remove some sections from the user interface if, for example, you don’t want your users to have access to them and have access to admin-predefined settings only. Example below places Options tab after Languages and Dictionaries tabs: sections visibility. Example below places Options, Languages and Dictionaries tabs and hides General tab: 

settingsSections: ['languages', 'dictionaries', 'options'],

2.4.1. Ignore options  

Settings on the Options section let you define the following spelling exceptions:

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

settingsSectionsignoreAllCapsWords: true,
ignoreDomainNames: ['languages', 'dictionaries', 'options'],