Customization options OLD
Before customizing the WProofreader settings described in this section:
Initialize it using one of the approaches in the Initialization Options section.
Acknowledge yourself with the full list of customization options available in Configuration reference.
Being an administrator, you can customize WProofreader default settings such as user interface and behavior described in this guide.
1. Introduction
1.1. On-premise and cloud version
In general, WProofreader provides the same functionality for both cloud and on-premise 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 the cloud version, to access the services, you need to use a special activation key in the serviceId parameter. The path to the WebSpellChecker cloud will be obtained from the path to the wscbundle.js file.
For the on-premise 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 on-premise version of WProofreader with the autoSearch option turned on:
<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch:true,
serviceProtocol:'https',
serviceHost:'your_host_name',
servicePort:'your_port_number',
servicePath:'virtual_directory/api' //by default the virtual directory name is wscservice
};
</script>
<script type="text/javascript" src="https://host_name/wscservice/wscbundle/wscbundle.js"></script>For more details, refer to Initialization options.
Example for setting up the Cloud version of WProofreader with the autoSearch option turned on:
For more details, refer to WProofreader SDK.
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 the user places a cursor there and starts typing. For details, refer to the following AutoSearch mechanism:
disableAutoSearchIn lets you disable the autoSearch mechanism by class, id, data attribute name, and HTML elements. Please note that if the 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 element type.
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.
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:
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:
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 the 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:
After you have deactivated grammar checking, it becomes disabled for all languages. Only spell check will be performed then. Note, that AI-based languages will stop working at all in case of turning off the grammar.
2. Customizing user interface
With WProofreader customization options you can do the following:
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 the 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?
2.2. Suggestions pop-up view and commands
You can customize the 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.
The latter is possible only in the case of a disabled badge. All the action items from the badge are moved to the suggestions pop-up then. For details, see Removing actions from badge section.
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 a bigger and smaller number of suggestions.
For the cloud version, up to 8 suggestions are available. For the on-premise 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.
Displaying a significant number of suggestions may decrease the speed of the service.
To display only 2 suggestions:
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 dictionary, remove the 'addWord' value from the array of parameter values:
Removing the addWord from the array of parameter values removes the Add word command for both suggestion balloons and for proofreading in dialog mode.
To hide Settings dialog for your users, remove the 'settings' from the array of parameter values:
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:
Due to some specifics of the spelling engine and performance reason, for the cloud version, the maximum number of suggestions in total for American and British English is three. The bigger values will be ignored.
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 to spell checking options, language, and user custom dictionary;
Promptly select a language for check.
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 
, Disable/enable WProofreader 
, or Proofread in dialog 
.
2.3.2. Turning off badge pulsation
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:
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-up:
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 some actions from the badge, for example, Settings, Disable/enable WProofreader , or Proofread in dialog , use the actionItems parameter. An example below shows how you can allow the users to access proofreading in dialog only from the badge:
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.
2.4. Settings dialog
The Settings dialog contains the following sections: General, Options, Languages, Dictionaries, and About.
Name
Actions available
Description
General
Hide the section from your users so that they use only predefined options and choose whether the extra options will be available for your end-users.
Enabling/disabling Spelling autocorrect and Autocomplete suggestions functionality as well as Style guide, Spelling and Grammar suggestions
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 section from your users so that they use only predefined options and set a predefined language for all of them.
Selecting the default language for grammar and spelling checking.
Dictionaries
Hide the 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.
About
Hide 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 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 sections visibility and hide the necessary sections. Example below hides the 'general' tab.
To hide the 'About' tab is possible with the on-premise version 5.4.0 and advanced cloud pricing plan when this option is enabled for your subscription and using in combination with the removeBranding parameter.
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:
To disable ignoring, set the value of the desired option as false.
As for now, ignoreAllCapsWords doesn't work for AI-based languages.
2.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 predefined language for all application users, use the lang parameter and specify the desired language shortcode as shown in the Supported languages.
To hide the Language section from your users so that they cannot modify the selected language, use the settingsSections parameter as shown below:
2.4.3. Dictionaries
Customizing Dictionaries user interface
These are some options for altering Dictionaries user interface elements and features:
Hiding Dictionary view at all.
Hiding or removing the Preferences section on the Dictionary view to prevent users from adding/changing/removing the dictionary.
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 an 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:
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.
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.
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. If there is no Dictionary tab in the Settings dialog, they cannot remove some words they might have added by mistake. For details refer to User custom dictionary.
Use the sample below:
2.4.4. About tab
You can remove the About tab of WProofreader dialog and branding information if you have purchased a Custom or an on-premise version of the 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:
2.5. Actions for proofreading in a dialog
Actions available for configuring WProofreader dialog mode are the same as for the suggestions popup, 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 the suggestions balloon and WProofreader dialog. To do so, set the value disableProblemDescription as true.
To hide the Add to dictionary command, specify the actionItems parameter values as shown in the sample below:
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:
3. Languages and dictionaries settings
3.1. Default language options
The default language setting for WProofreader users is auto detect language (auto). This is a feature that auto-detects the input language and does the check using the proper language. Its support covers around 80 languages.
At least three correctly spelled words are required for the language autodetector. If a language isn't detected, the text won't be checked.
But being the administrator, you can change this default language to one of the Supported languages for all users.
3.2. Default language for all users
You can specify the default language for all WProofreader users using the lang option. For example, if you want to specify the German locale for all users, add the following parameter with de_DE value in it.
To enable the language locale, be sure to use the proper language code. For details, refer to the supported Supported languages.
Sometimes, you will need to clean the browser's cache and local storage to apply the changes of changing the default language.
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
You can change WProofreader interface localization to match the locale preferences. The default interface localization language is English. All the available shortcodes for localization are available in the description of localization parameters in API options.
For example, to set the German language as the localization option in WProofreader, use the localization parameter as shown below:
3.4. Predefined 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.
If you have authentication enabled in your web app, you can predefine certain dictionaries for specific users using this approach.
Users can add words to a dictionary for spelling suggestions only.
3.5. Extending the list of dictionaries
If you want to use some dictionaries different from the default ones, refer to the list of additional language dictionaries available on our website and contact our sales team for purchasing details.
3.6. Company custom dictionaries
Company custom dictionaries allow creating of 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 dictionary IDs which should be separated by commas.
In the example above, ID is the unique dictionary ID that will be assigned to your custom dictionary.
4. Miscellaneous options
4.1. Minimal word length
By default, WProofreader enables spell check starting with 3 or more letters per word. You can customize this option using the minWordLength parameter:
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
There is a list of options such as ignoreElements, ignoreClasses 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 HTML elements in the text such as typeface types, links, tables, and others. By default, text within the <style> and <script> tags are ignored.
You can additionally choose to ignore checking in certain web page markup elements by classes or attributes.
In the example below, text inside table elements, elements containing a specified class or attribute will be skipped during checking:
4.3. Disabling proofreading in As You Type 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. Thus, text checking becomes possible only in dialog mode. To do so, change the value of proofreadAsYouType parameter to 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.
4.4. Autocomplete suggestions
The feature automatically completes the user’s thought by suggesting the next word or a short phrase based on the context. As for now, it is available for English and its dialects.
The autocomplete parameter is set to false by default, meaning that autocomplete suggestions functionality starts in the disabled state. Admins can enable autocomplete by adding autocomplete: true, option to WEBSPELLCHECKER_CONFIG. End users will still have an option to disable autocomplete suggestions from the UI of the Settings dialog.
Read more about the Autocomplete suggestions in our article.
4.5. Autocorrect
Autocorrect automatically makes or suggests corrections for common spelling mistakes while users are typing. Autocorrect is enabled by default using the new WProofreader customization option autocorrect.
Admins can disable autocorrect by default by adding the autocorrect option set to false to WEBSPELLCHECKER_CONFIG. In this case, end-users still will have an option to enable autocorrect from the UI of the Settings dialog.
Read more about Autocorrect in our article.
Last updated
Was this helpful?