Being an administrator, you can customize WProofreader default settings such as user interface and application behavior. This guide covers the following topics: There are several options letting you initialize WProofreader functionality in your web app, namely using: 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. 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 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. Initializing WProofreader with autoSearch functionality and defining configuration options in CONFIG: 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. 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. Below is a sample of initializing WProofreader with autoSearch functionality and defining configuration options using inline data attributes: 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. Initializing WProofreader using init() method in a defined container on the page and specifying configuration options directly in the init() function: 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: 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. 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. Froala Editor code sample: 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. Froala Editor example: 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: Example for setting up the Server version of WProofreader with the autoSearch option turned on: 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: For more details, refer to Get Started with WProofreader Cloud AutoSearch. 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 AutoSearch Creation options: 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. 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: 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. 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. By default, WProofreader is disabled in HTML <input> editable elements. However, you can change this behavior by using the enableAutoSearchIn option: 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: With WProofreader API you can customize: Here you can find the full list of API options and methods available for WProofreader. You can customize WProofreader options available in suggestions balloon, for example: 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 (Add a link) section. 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. Displaying a significant number of suggestions may decrease the speed of the service. To display only 2 suggestions: 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: 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: 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: 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: You can change the following badge options: When WProofreader starts, the 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: 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: 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. To remove some actions from the badge, for example, Settings , Disable/enable WProofreader , or Proofread in dialog , use the actionItems parameter. Example below shows how you can allow the users to access proofreading in dialog only from the badge: 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. The Settings dialog contains the following tabs: Options, Languages, Dictionaries, and About. Predefine some or all available options for application users. Specifying most common cases to ignore spelling checks: Hide the tab from your users so that they use only predefined options and set predefined language for all of them. Adding and deleting words to/from personal user dictionaries. Connecting and disconnecting selected dictionaries. Displaying information on WProofreader copyright info and version number. Depending on your web app usage preferences or requirements, you can customize the Settings dialog: With the settingsSections parameter you can change the Settings dialog tabs visibility and order. Example below places Options tab after Languages and Dictionaries tabs: Settings on the Options tab let you define the following spelling exceptions: You can change the default behavior using the following parameters: To disable ignoring, set the value of the desired option as false. The Languages tab 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 in the Languages tab, use the lang parameter and specify the desired language short code as shown in the Default Language for all Users (Link to be added) section. To hide the Languages tab from your users so that they cannot modify the selected language, use the settingsSections parameter as shown below: These are some options for altering Dictionaries tab user interface elements and features: 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: You may want to remove the Dictionaries tab from user interface in the following cases: 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. Use the sample below: For details refer to Configuring Server Personal Dictionaries and Configuring Cloud Personal User Dictionaries, Personal User Dictionary Interface in WProofreader sections and FAQ section. 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. 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: Actions available for configuring WProofreader dialog mode are the same as for the suggestions balloon, namely: 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. 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: 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: For details, contact WebSpellChecker support team. You can specify the default language for all WProofreader users using the lang option. For example, if you set the lang: 'de_DE', German locale is specified for all users. To enable the language locale, be sure to use the proper language code. For details, refer to the supported language short codes list. 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. You can change WProofreader interface localization to match the locale preferences. The default interface localization language is American English. For example, to set German language as the localization option in WProofreader, use the localization parameter as in sample below: 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. 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. 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: 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. By default, WProofreader enables spell check starting with 3 and more letters per word. You can customize this option using the minWordLength API parameter: After you have used this option, the words which have two (2) and more letters in them will be spell checked. Use the ignoreElements parameter to instruct WProofreader not to check the 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 others. In example below, the <table> tag will be skipped during checking: 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 proofreading 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.1. Initialization Options
Example 1: Initializing WProofreader using autoSearch
<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch:true,
lang: 'uk_UA',
...
};
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
Example 2: Initializing WProofreader with autoSearch and inline data attributes
<script
data-wsc-autosearch="true"
data-wsc-lang="uk_UA"
...
src="https://your_host_name/wscservice/wscbundle/wscbundle.js">
</script>
Example 3: Initializing WProofreader using autoSearch and init() method
<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: Initialization using init() method in a defined container
<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 by redefining options priority
<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>
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')
});
});``
<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 6: Using init() method with autoSearch and autoDestroy in WYSIWYG editors
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')
});
});``
<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
<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
serviceProtocol: 'https',
serviceHost: 'your_host_name',
servicePort: '2880',
servicePath: '/'
};
</script>
<script type="text/javascript" src="http(s)://your_host_name/wscservice/wscbundle/wscbundle.js"></script>
<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>
1.2 AutoSearch Options
<script>
window.WEBSPELLCHECKER_CONFIG = {
autoSearch: true,
disableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'],
enableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'],
...
}
</script>
1.3 AutoStartup
autoStartup: false,
1.4 Deactivating Grammar Checking
enableGrammar: false,
1.5 Enable Proofreading in Inputs
enableAutoSearchIn:['input'],
1.5 Disabling Proofreading for Special Cases
disableAutoSearchIn: ['.class', '#id', '[data-attribute]', 'textarea'],
2. Customizing WProofreader User Interface
2.1 Suggestions Balloon View and Commands
2.1.1 Changing the Number of Spelling Suggestions
suggestionsCount:2,
2.1.2. Changing Action Items Order and Availability
actionItems: ['ignoreAll', 'settings', 'toggle', 'proofreadDialog'],
actionItems: ['addWord', 'ignoreAll', 'toggle', 'proofreadDialog'],
2.1.3 Enabling or Disabling the More Suggestions Sub-menu Item
suggestionsCount:3,
moreSuggestionsCount:5,
2.2 WProofreader Badge
Badge View and Options
Turning off Badge Pulsation
disableBadgePulsation:true,
Removing a Badge
enableBadgeButton:false,
Removing Actions from Badge
actionItems: [ 'proofreadDialog'],
2.3 Settings Dialog
Name Actions available Description Options Languages Selecting the default language for grammar and spelling checking. Dictionaries Hide the tab from your users so that they use only predefined options and set predefined user dictionary for all of them. About Hide the branding information if you have a fully-fledged version of WebSpellChecker. settingsSections: ['languages', 'dictionaries', 'options'],
2.2.1. Options Tab
ignoreAllCapsWords: true,
ignoreDomainNames: true,
ignoreWordsWithMixedCases: true,
ignoreWordsWithNumbers: true,
2.2.2. Languages Tab
settingsSections: ['options', 'dictionaries', 'about'],
2.2.3. Dictionaries Tab
Customizing Dictionaries tab User Interface
Hiding Preferences Section on the Dictionary Tab
disableDictionariesPreferences: true,
Removing Dictionaries Tab
settingsSections: ['languages', 'options'],
2.2.4. About Tab
removeBranding:true,
2.4 Actions for Proofreading in a Dialog
disableProblemDescription:true,
actionItems: ['ignoreAll', 'settings', 'toggle', 'proofreadDialog'],
actionItems: ['ignoreAll', 'toggle', 'proofreadDialog'],
3. Languages and Dictionaries Settings
3.1. Default Language Options
3.2 Default Language for all Users
lang: 'de_DE',
3.3 User Interface Localization Language
localization: 'de',
3.4 Predefined User Dictionary
userDictionaryName:'user_dictionary_name',
3.5 Extending the List of Dictionaries
3.6 Custom Dictionaries
customDictionaryIds: '100694','100695',
4. Miscellaneous Options
4.1 Minimal Word Length
minWordLength: 2,
4.2 Excluding Elements From Checking
ignoreElements: 'table',
4.3 Disabling Proofreading in As You Type Mode
proofreadAsYouType: false,