Represent WEBSPELLCHECKER initialization and configuration options.
Properties:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options.container |
string | Node | a DOM node with text or its selector. |
||
options.autoStartup |
boolean |
<optional> |
true | Turn on/off a WEBSPELLCHECKER instance autostartup. If 'true', it turns on WEBSPELLCHECKER automatically after the application is loaded. |
options.autoDestroy |
boolean |
<optional> |
false | Turn on/off the auto-destroy functionality of a WEBSPELLCHECKER instance. By default, it is enabled for WProofreader that is initialized using 'autoSearch'. It can be used to avoid monitoring the state of the instance and handling its destruction after removal of an editable container from the page. |
options.disableProblemDescription |
boolean |
<optional> |
false | Disable grammar suggestion descriptions (explanations). If 'true', the suggestion description will not be shown on the popup in as-you-type and Proofread in dialog modes. |
options.enableGrammar |
boolean |
<optional> |
true | Turn grammar checking option on the startup. |
options.disableStyleGuide |
boolean |
<optional> |
false | Disable style guide suggestions for users. |
options.actionItems |
array |
<optional> |
['addWord', 'ignoreAll', 'report', 'settings', 'toggle', 'proofreadDialog'] | Define the presence and order of the action items inside of their sections (suggestion pop-up, badge, proofread dialog). |
options.lang |
string |
<optional> |
'auto' | Set the default language for text checking for available types of problems. The possible values are: 'en_US', 'en_GB', 'pt_BR', 'da_DK', 'nl_NL', 'en_CA', 'fi_FI', 'fr_FR', 'fr_CA', 'de_DE', 'el_GR', 'it_IT', 'nb_NO', 'pt_PT', 'es_ES', 'sv_SE', 'uk_UA', 'auto' |
options.autoLangPriorities |
object |
<optional> |
{} | Define language dialect priorities if the language auto-detection (auto) is enabled. E.g. when auto defines 'en', it will either use a predefined dialect or use the one specified in this option. |
options.checkKit |
string |
<optional> |
'' | Manages a language configuration profile. Select between purely algorithmic, AI-powered, or mixed text checking modes. Accuracy may vary across language configurations. If not specified explicitly, the default configuration will be used. If the specified configuration is not found for selected language, the default configuration will be applied with a warning message. The following values can be used:
|
options.suggestionsCount |
number |
<optional> |
3 | Define a number of suggestions to be shown in the suggestion pop-up for a problem correction. |
options.moreSuggestionsCount |
number |
<optional> |
0 | Define a number of the suggestions to be shown on the 'More Suggestions' sub-section of the suggestion pop-up element. If '0', the 'More Suggestions' sub-section won’t be displayed. |
options.serviceProtocol |
string |
<optional> |
'http' | A protocol which is used to access the service. |
options.serviceHost |
string |
<optional> |
'svc.webspellchecker.net' | A host name of the service. |
options.servicePort |
string |
<optional> |
'80' | A default port of the service. |
options.servicePath |
string |
<optional> |
'spellcheck31/api' | A path to the service. |
options.minWordLength |
number |
<optional> |
3 | Define the minimum number of letters in a word that will be collected from text for spell checking. The possible value is any positive number. |
options.customDictionaryIds |
string |
<optional> |
'' | Global custom dictionary ID(s)separated by commas (',') which will be used during spelling check. |
options.userDictionaryName |
string |
<optional> |
'' | A user dictionary name which will be used during spell checking. |
options.settingsSections |
array |
<optional> |
['dictionaries', 'languages', 'general', 'options'] | Manage presence of the settings sections in the dialog. Please note that the "About" section is not allowed to be removed by default. |
options.serviceId |
string |
<optional> |
'' | A special service ID value (activation key) that is used for the service activation. It is received on the subscription to the trial or paid services. |
options.localization |
string |
<optional> |
'en' | A language used for the interface localization. If the detectLocalizationLanguage parameter is enabled, it will be detected automatically from browser settings. If no parameter is specified or the localization can't be automatically detected, a default value will be used. Possible values can be found on the list of supported languages. |
options.detectLocalizationLanguage |
boolean |
<optional> |
false | Set auto localization detection. Localization will be detected automatically from browser settings. If the localization can't be automatically detected, a localization parameter or default value will be used. |
options.ignoreElements |
string |
<optional> |
'pre|style|script' | Defines a string of HTML tag names, separated by '|'. Text within these tags is excluded from checking. |
options.ignoreClasses |
array |
<optional> |
[] | Specifies an array of CSS class names. Text in elements with these classes will not be checked. |
options.ignoreAttributes |
array |
<optional> |
[] | Specifies an array of CSS attribute names. Text in elements with these attributes will not be checked. |
options.skipMarkupForIgnoredText |
boolean |
<optional> |
false | Determines if error highlighting should be skipped in text segments containing parts that are ignored based on the ignoreElements, ignoreClasses, or ignoreAttributes parameters. When enabled, this parameter ensures that errors in segments with any ignored text are checked but not highlighted. For example, if a word contains an error and a part of that word falls under an ignored class, the entire word will not be highlighted. By default, this option is disabled, meaning all detected errors in the text, including those with partial ignored segments, are highlighted. This feature is particularly useful in 'track changes' modes. |
options.ignoreAllCapsWords |
boolean |
<optional> |
false | Ignore capitalized words during check. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.ignoreDomainNames |
boolean |
<optional> |
true | Ignore domain names during check. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.ignoreWordsWithMixedCases |
boolean |
<optional> |
false | Ignore words written with mixed case letters during check. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.ignoreWordsWithNumbers |
boolean |
<optional> |
true | Ignore words containing numbers during check. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.enableBadgeButton |
boolean |
<optional> |
true | Manage the visibility of the badge element. If 'false', all the action items from the badge will be moved to the suggestion pop-up. |
options.enableLanguagesInBadgeButton |
boolean |
<optional> |
false | Manage the visibility of the languages selector for text checking from the badge element. |
options.fullSizeBadge |
boolean |
<optional> |
false | Manage the size of the badge element. |
options.globalBadge |
boolean |
<optional> |
false | Enable the global state of the badge. If disabled, each text field on the page will contain a separate badge. |
options.compactBadge |
boolean |
<optional> |
false | Enables a lightweight version of the standard badge that displays only the number of suggestions and opens the proofread dialog mode by a click. There is only one action left in the badge menu that allows disabling/enabling WProofreader spell and grammar check (proofreading). The compact badge will work as expected if 'proofread in dialog' mode is enabled. |
options.badgeOffsetX |
number |
<optional> |
8/20 | Sets the relative X-axis position of the badge in pixels. |
options.badgeOffsetY |
number |
<optional> |
8/20 | Sets the relative Y-axis position of the badge in pixels. |
options.badgeZIndex |
number |
<optional> |
1000 | Sets the z-index position of the badge. |
options.disableOptionsStorage |
array |
<optional> |
['all'] | Disable storing of WEBSPELLCHECKER options such as ignore options and language between browser sessions. If enabled, the user-selected options will be reset after page reload. The following settings can be used:
|
options.ecVersion |
number |
<optional> |
2 | The version of the application for HTML editable controls. The default value is '2'. Value '1' stands for enabling the old version of the application which is kept for the backward compatibility and exception case (like old versions of IE browser). |
options.disableDictionariesPreferences |
boolean |
<optional> |
false | Manage the visibility of the dictionaries preferences section on the Dictionaries tab for end users. If 'false', the users won’t have an option to create, connect, delete or rename a user dictionary. |
options.removeBranding |
boolean |
<optional> |
false | Remove branding information that is present on WProofreader UI such as the product title, the About tab with logo and copyrights. Note: This option is available only for certain types of pricing plans. |
options.requestTokensCount |
number |
<optional> |
4 | The maximum number of tokens (sentences) to check per request. |
options.disableDialog |
boolean |
<optional> |
false | Turn on/off the 'proofread in dialog' mode. |
options.theme |
string |
<optional> |
'default' | Set the style of UI. The possible values are: 'default', 'custom', 'gray', 'ckeditor5', 'dark', 'tinymce'. You have an option to define your custom CSS styles, use 'custom' theme value. |
options.disabledRules |
array |
<optional> |
[] | Provide an array of grammar/style guide rule IDs or/and rule category IDs to be disabled for all users. |
options.restoreNativeSpellCheck |
boolean |
<optional> |
false | Restore native browser spell check mechanism when WProofreader in disabled mode. |
options.syncOptions |
boolean |
<optional> |
true | Synchronize all ignore options and language between all created WProofreader instances. |
options.globalProofreadDialog |
boolean |
<optional> |
true | Aggregate all suggestions in one Proofread Dialog. |
options.allSuggestionsMode |
boolean |
<optional> |
false | Enables an extended dialog view where all suggestions are displayed simultaneously, rather than showing one suggestion at a time. |
options.proofreadDialogContainer |
string |
<optional> |
'' | Enables a special proofread dialog mode that integrates into a fixed or reserved section on the page, rather than opening as a separate dialog window. This mode gathers all suggested corrections within the specified container, providing a streamlined proofreading experience. The container can be identified using a CSS class, ID, or attribute, indicating the section where the dialog will be displayed, such as a visible sidebar. This option requires the globalBadge configuration set to 'true'. While there is no default width for the dialog, the global badge is positioned based on an assumed dialog width of 340px. If the dialog width is extended, the badge's position must be adjusted using the badgeOffsetX and badgeOffsetY options accordingly. |
options.spellingSuggestions |
boolean |
<optional> |
true | Manage visibility of the spelling suggestions to users. The requests to the backend component will be still sent. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.grammarSuggestions |
boolean |
<optional> |
true | Manage visibility of the grammar suggestions to users. The requests to the backend component will be still sent. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.styleGuideSuggestions |
boolean |
<optional> |
true | Manage visibility of the style guide suggestions to users. The requests to the backend component will be still sent. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.cache |
boolean |
<optional> |
false | Turn on/off the caching of request responses, words added to dictionary, ignored suggestions and disabled rules. The cache will be reset every 24 hours. |
options.autocorrect |
boolean |
<optional> |
true | Turn on/off the autocorrect as you type functionality. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.autocomplete |
boolean |
<optional> |
false | Turn on/off the autocomplete as you type functionality. You may need to disable the options storing in the browser storage using the 'options.disableOptionsStorage' as it has higher priority. |
options.aiWritingAssistant |
boolean |
<optional> |
false | Turn on/off the AI writing assistant functionality. |
options.withCredentials |
boolean |
<optional> |
false | Option that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. |
options.checkInNonEditableElements |
boolean |
<optional> |
false | Enable text checking in non-editable elements. This is an experimental option and is disabled by default. It can only be used with the 'init' and 'autoCreate' initialization methods (it doesn’t work with 'autoSearch'). Additionally, it requires replacing the default replace functionality with the customInsertText event, as the regular replace isn't designed to work in non-editable text blocks. Contact us for more details. |
options.checkOnSpace |
boolean |
<optional> |
false | Enables additional checks triggered upon typing a space. This results in faster underlining as the user types but increases the number of requests sent to the backend and the amount of text checked (word count). |
options.requestHeaders |
function | This function is used for all requests to the server and returns object containing headers for these requests. At present, only the Authorization header is supported. For cross-site requests, ensure to set the withCredentials option to true to enable the transmission of credentials across sites. |
||
options.onLoad |
function | This callback function is triggered by the application when it is ready to use. |
||
options.onCommitOptions |
function | This callback function is triggered by any change made to the following options: 'lang', 'ignoreAllCapsWords', 'ignoreDomainNames', 'ignoreWordsWithMixedCases', 'ignoreWordsWithNumbers'. |
||
options.onAddWordToUserDictionary |
function | This callback function is triggered by addition of each new word to a personal user dictionary. |
||
options.onDeleteWordFromUserDictionary |
function | This callback function is triggered by deletion of any word from a personal user dictionary. |
||
options.onStatistics |
function | This callback function is triggered by every statistics action such as: replace word, ignore all, add a word to dictionary, delete a word from dictionary. |
||
options.onErrorRequest |
function | This callback function is triggered by every request that ended with error. |
||
options.onToggle |
function | This callback function is triggered by every toggle application event. |
||
options.onCheckStatusChange |
function | This callback function is activated when tasks necessary for the text checking process emerge and concludes when these tasks are completed. It returns 'start' when tasks begin in response to text changes, and 'finish' upon the completion of all tasks. Multiple 'start' and 'finish' instances can occur due to asynchronous events, like sending requests to the backend. |
Example
var instance = WEBSPELLCHECKER.init({
container: document.getElementById('elementId'),
autoStartup: true,
lang: 'de_DE',
autoLangPriorities: {
en: 'en_US',
de: 'de_DE'
},
localization: 'de',
actionItems: ['addWord', 'ignoreAll', 'ignore', 'settings', 'toggle', 'proofreadDialog'],
serviceProtocol: 'http',
servicePort: '80',
serviceHost: document.location.host,
servicePath: 'spellcheck31/api',
ignoreAllCapsWords: true,
ignoreDomainNames: false,
ignoreWordsWithMixedCases: true,
ignoreWordsWithNumbers: true,
disableOptionsStorage: ['lang', 'ignoreDomainNames'],
disabledRules: ['UPPERCASE_SENTENCE_START'],
ignoreClasses: ['wsc-ignore-checking', 'skip-me'],
ignoreAttributes: ['data-wsc-ignore-checking', 'data-skip-me'],
requestHeaders: function() {
return {
Authorization: 'Bearer ' + localStorage.getItem('authorization')
}
},
onLoad: function(instance) {
// 'this' refers to WEBSPELLCHECKER instance
// instance - a WEBSPELLCHECKER instance.
this.setDisabled(true);
},
onCommitOptions: function(changedOptions, instance) {
// changedOptions - options changed after the onCommitOptions event.
// instance - a WEBSPELLCHECKER instance.
}
onAddWordToUserDictionary: function(word, instance) {
// word - a word added to the dictionary.
// instance - a WEBSPELLCHECKER instance.
},
onDeleteWordFromUserDictionary: function(word, instance) {
// word - a word deleted from the dictionary.
// instance - a WEBSPELLCHECKER instance.
},
onStatistics: function(data, instance) {
// data - an object with statistics data.
// data.action - type of the action (replace, ignore, add, delete, report).
// data.text - a text of the action (replaced phrase, ignored phrase, added or removed from the User Dictionary word).
// data.newText - a new text (for the replace action only).
// data.lang - a language of the problem from the action.
// data.type - a type of the problem (spelling, grammar e.t.c).
// data.category - a category of the problem (if problem has the category).
// data.rule - a rule of the problem (if problem has the rule).
// data.context - a context where action was applied.
// data.offset - an offset to the problem in the context.
// data.suggestions - stringified suggestion array.
// instance - a WEBSPELLCHECKER instance.
},
onErrorRequest: function(data, instance) {
// data - an object with information about an error.
// instance - a WEBSPELLCHECKER instance.
},
onToggle: function(instance) {
// instance - a WEBSPELLCHECKER instance.
// instance.isDisabled() - use this API method to check if the application is in disabled or enabled state.
},
onCheckStatusChange: function(status, instance) {
// status - the check status (start, finish).
// instance - a WEBSPELLCHECKER instance.
}
});