ejSpellCheck
5 Oct 201724 minutes to read
The spell check control will be using to check/correct the spelling of words from a given content.
Syntax
$(element).ejSpellCheck()
Example
<ej-spellcheck id="SpellCheck"></ej-spellcheck>
export class AppComponent {
constructor() { }
}
Requires
- module:jQuery
- module:ej.core.js
- module:ej.data.js
- module:ej.globalize.js
- module:ej.scroller.js
- module:ej.draggable.js
- module:ej.dialog.js
- module:ej.button.js
- module:ej.listbox.js
- module:ej.menu.js
- module:ej.spellcheck.js
Members
dictionarySettings object
It includes the service method path to find the error words and its suggestions also adding the custom word into the custom dictionary.
Example – DictionarySettings field mapped with string type values
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
dictionarySettings.dictionaryUrl string
The dictionaryUrl option accepts string, which is the method path to find the error words and get the suggestions to correct the errors.
Default Value
- ””
Example – To set the dictionaryUrl of SpellCheck control
<ej-spellcheck id="SpellCheck" [dictionarySettings.dictionaryUrl]="DictionaryUrl"></ej-spellcheck>
export class AppComponent {
public DictionaryUrl: any;
constructor() {
this.DictionaryUrl = "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords";
}
}
dictionarySettings.customDictionaryUrl string
The customDictionaryUrl option accepts string, which is the method path to add the error word into the custom dictionary.
Default Value
- ””
Example – To set the customDictionaryUrl of SpellCheck control
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
misspellWordCss string
To display the error word in a customized style.
Default Value
- “e-errorword”
Example - To display the error word in green color
<ej-spellcheck id="SpellCheck" misspellWordCss="highlight" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<style type="text/css">
.highlight {
color: green;
}
</style>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
locale string
Sets the specific culture to the SpellCheck.
Default Value
- “en-US”
Example - To set the French culture on SpellCheck, set its locale as fr-FR.
<ej-spellcheck id="SpellCheck" locale="fr-FR" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
To set any culture for SpellCheck, refer to the required minified globalize files of the specific culture. For example, to use fr-FR culture in SpellCheck, refer to the globalize.culture.fr-FR.min.js script file. Also define the locale words of that specific culture properly. For example, define the locale words for fr-FR culture in a variable ej.SpellCheck.Locale[“fr-FR”] = { }; under script section.
maxSuggestionCount number
To set the maximum suggestion display count.
Default Value
- 6
Example - To set the maxSuggestionCount value as 4
<ej-spellcheck id="SpellCheck" [maxSuggestionCount]="SuggestionCount" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public SuggestionCount: number;
public DictionarySettings: any;
constructor() {
this.SuggestionCount = 4;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreWords array
To ignore the words from the error word consideration.
Default Value
- []
Example - To set the ignoreWords
<ej-spellcheck id="SpellCheck" [ignoreWords]="IgnoreWords" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public IgnoreWords: number;
public DictionarySettings: any;
constructor() {
this.IgnoreWords = ["Syncfusion", "JavaScript"];
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
contextMenuSettings object
Holds all options related to the context menu settings of SpellCheck.
contextMenuSettings.enable boolean
When set to true, enables the context menu options available for the SpellCheck.
Default Value
- true
Example - To disable the context menu options for SpellCheck control
<ej-spellcheck id="SpellCheck" [contextMenuSettings.enable]="ContextMenuEnable" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public ContextMenuEnable: boolean;
public DictionarySettings: any;
constructor() {
this.ContextMenuEnable = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
contextMenuSettings.menuItems array
Contains all the default context menu options that are applicable for SpellCheck. It also supports adding custom menu items. All the SpellCheck related context menu items are grouped under this menu collection.
Default Value
[
{ id: "IgnoreAll", text: "Ignore All" },
{ id: "AddToDictionary", text: "Add To Dictionary" }
]
Example - To add custom context menu option to the SpellCheck
<ej-spellcheck id="SpellCheck" [contextMenuSettings]="ContextMenuSettings" [dictionarySettings]="DictionarySettings" (contextClick)="onCustomMenuClick($event)"></ej-spellcheck>
export class AppComponent {
public ContextMenuSettings: any;
public DictionarySettings: any;
constructor() {
this.ContextMenuSettings = {
enable: true,
menuItems: [
{ id: "Ignore", text: "IgnoreOnce" },
{ id: "IgnoreAll", text: "Ignore All" },
{ id: "AddToDictionary", text: "Add To Dictionary" }
]
};
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onCustomMenuClick(args) {
if (args.events.ID == "Ignore") {
var spellObj = $("#TextArea").data("ejSpellCheck");
var ignoreResult = spellObj.ignore(args.selectedValue, args.targetContent, 0);
}
}
}
ignoreSettings object
It helps to ignore the uppercase, mixed case words, alpha numeric words, file path and email addresses based on the property values.
ignoreSettings.ignoreAlphaNumericWords string
When set to true, ignoring the alphanumeric words from the error word consideration.
Default Value
- true
Example – To consider the alphanumeric words as an error word
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreAlphaNumericWords]="AlphaNumericWords" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public AlphaNumericWords: boolean;
public DictionarySettings: any;
constructor() {
this.AlphaNumericWords = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreSettings.ignoreEmailAddress boolean
When set to true, ignoring the Email address from the error word consideration.
Default Value
- true
Example – To consider the Email Address as an error word
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreEmailAddress]="IgnoreEmailAddress" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public IgnoreEmailAddress: boolean;
public DictionarySettings: any;
constructor() {
this.IgnoreEmailAddress = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreSettings.ignoreMixedCaseWords boolean
When set to true, ignoring the MixedCase words from the error word consideration.
Default Value
- true
Example – To consider the MixedCase words as an error word
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreMixedCaseWords]="MixedCaseWords" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public MixedCaseWords: boolean;
public DictionarySettings: any;
constructor() {
this.MixedCaseWords = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreSettings.ignoreUpperCase boolean
When set to true, ignoring the UpperCase words from the error word consideration.
Default Value
- true
Example – To consider the UpperCase words as an error word
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreUpperCase]="IgnoreUpperCase" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public IgnoreUpperCase: boolean;
public DictionarySettings: any;
constructor() {
this.IgnoreUpperCase = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreSettings.ignoreUrl boolean
When set to true, ignoring the Url from the error word consideration.
Default Value
- true
Example – To consider the Url as an error word
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreUrl]="IgnoreUrl" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public IgnoreUrl: boolean;
public DictionarySettings: any;
constructor() {
this.IgnoreUrl = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreSettings.ignoreFileNames boolean
When set to true, ignoring the file address path from the error word consideration.
Default Value
- true
Example – To consider the file names as an error word
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreFileNames]="IgnoreFileNames" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public IgnoreFileNames: boolean;
public DictionarySettings: any;
constructor() {
this.IgnoreFileNames = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
isResponsive boolean
When set to true, allows the spellcheck to render based upon screen size.
Default Value
- true
Example – To render the spellcheck dialog with the default size
<ej-spellcheck id="SpellCheck" [isResponsive]="Responsive" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public Responsive: boolean;
public DictionarySettings: any;
constructor() {
this.Responsive = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
enableValidateOnType boolean
Gets or sets a value that indicates whether to enable the spellcheck operation on Enter/Space key-press.
Default Value
- false
Example - To validate for spellcheck the content on press the Enter & Space key.
<ej-spellcheck id="SpellCheck" [enableValidateOnType]="EnableValidateOnType" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public EnableValidateOnType: boolean;
public DictionarySettings: any;
constructor() {
this.EnableValidateOnType = true;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
controlsToValidate string
It allows to spell check the multiple target HTML element’s texts and correct its error words.
Default Value
- null
Example – To check the spelling of the three target HTML element’s (ex: div, textarea, span)
<div id="control1">
London, one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
London contains four World Heritage Sites.
</div><br />
<textarea id="control2" style="width:940px">
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.You couldn't possibly visit Paris without seeing the Eiffel Tower.
Even if you do not want to visit this world famous structure, you will see its top from all over Paris.
</textarea><br />
<span id="control3">
Rome, one of the world's most fascinating cities. The old adage that Rome was not built in a day - and that you won't see it in one or even in three - is true. For the intrepid traveler who can keep pace, here is a list of must-sees.
But remember what the Romans say: Even a lifetime isn't enough to see Rome.
</span><br /><br />
<ej-spellcheck id="SpellCheck" controlsToValidate="control1,control2,control3" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
You need to pass the target HTML element’s id value to this property with the comma separator. For example, in the above code example passed id values of div(control1), textarea(control2) and span(control3) element.
enableAsync boolean
When set to true, allows sending Asynchronous ajax request for checking the spelling errors.
Default Value
- true
Example – To check the spelling of the target element by sending Synchronous request
<ej-spellcheck id="SpellCheck" [enableAsync]="EnableAsync" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
export class AppComponent {
public EnableAsync: boolean;
public DictionarySettings: any;
constructor() {
this.EnableAsync = false;
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
Methods
showInDialog()
Open the dialog to correct the spelling of the target content.
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.showInDialog(); // Open the dialog mode
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
validate()
Highlighting the error word in the target area itself and correct the spelling using the context menu.
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.validate(); // highlighting the error word in the target area itself
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
spellCheck(targetSentence, misspellWordCss)
To get the error word highlighted string by passing the given input sentence.
Name | Type | Description |
---|---|---|
targetSentence | string | Content to be spell check |
misspellWordCss | string | Class name that contains style value to highlight the error word |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var targetSentence = "This example sentence contains error words".
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.spellCheck(targetSentence,"highlight");
</script>
<style type="text/css">
.highlight {
color: green;
}
</style>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignoreAll(word, targetSentence)
To ignore all the error word occurrences from the given input sentence.
Name | Type | Description |
---|---|---|
word | string | Error word to ignore from the target content |
targetSentence | string | Content to perform the ignore all operation |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var targetSentence = "The first textarea sample uses a dialog textarea to display the sample spell textarea errors".
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.ignoreAll("textarea",targetSentence);
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
ignore(word, targetSentence, index)
To ignore the error word once from the given input sentence.
Name | Type | Description |
---|---|---|
word | string | Error word to ignore from the target content |
targetSentence | string | Content to perform the ignore operation |
index | number | Index of the error word present in the target content |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var targetSentence = "The first textarea sample uses a dialog textarea to display the sample spell textarea errors".
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.ignore("textarea",targetSentence, null);
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
change(word, targetSentence, changeWord, index)
To change the error word once from the given input sentence.
Name | Type | Description |
---|---|---|
word | string | Error word to change from the target content |
targetSentence | string | Content to perform the change operation |
changeWord | string | Word to replace with the error word |
index | number | Index of the error word present in the target content |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var targetSentence = "The first textarea sample uses a dialog textarea to display the sample spell textarea errors".
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.change("textarea",targetSentence,"text area", null);
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
The ‘index’ is the error word occurrence in the given input string. For example, if you pass the index value as 1 means and the error word as textarea it will ignore the second occurrence (which is present after the word dialog) in the given string.
changeAll(word, targetSentence, changeWord)
To change all the error word occurrences from the given input sentence.
Name | Type | Description |
---|---|---|
word | string | Error word to change from the target content |
targetSentence | string | Content to perform the change all operation |
changeWord | string | Word to replace with the error word |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var targetSentence = "The first textarea sample uses a dialog textarea to display the sample spell textarea errors".
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.changeAll("textarea",targetSentence,"text area");
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
addToDictionary(word)
To add the words into the custom dictionary.
Name | Type | Description |
---|---|---|
customWord | string | Word to add into the dictionary file |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.addToDictionary("textarea");
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
getSuggestionWords(errorWord)
Retrieves the possible suggestion words for the error word passed as an argument.
Name | Type | Description |
---|---|---|
errorWord | string | Error word to get the suggestions |
Returns
object
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
<script type="text/javascript">
var schObj = $("#SpellCheck").data("ejSpellCheck");
schObj.getSuggestionWords("textarea");
</script>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
}
Events
actionSuccess
Triggers on the success of AJAX call request.
Name | Type | Description |
---|---|---|
resultHTML | string | Returns the error word highlighted string. |
errorWordDetails | object | Returns the error word details of the given input. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionSuccess)="onActionSuccess($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onActionSuccess(args) {
/* Do further actions here */
}
}
actionBegin
Triggers on the AJAX call request beginning.
Name | Type | Description |
---|---|---|
targetSentence | string | Returns the input string. |
misspellWordCss | string | Returns the misspellWordCss class name. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionBegin)="onActionBegin($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onActionBegin(args) {
/* Do further actions here */
}
}
actionFailure
Triggers when the AJAX call request failure.
Name | Type | Description |
---|---|---|
errorMessage | string | Returns AJAX request failure error message. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionFailure)="onActionFailure($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onActionFailure(args) {
/* Do further actions here */
}
}
start
Triggers when the dialog mode spell check starting.
Name | Type | Description |
---|---|---|
targetSentence | string | Returns the input string. |
errorWords | object | Returns the error words details. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (start)="onStart($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onStart(args) {
/* Do further actions here */
}
}
complete
Triggers when the spell check operations completed through dialog mode.
Name | Type | Description |
---|---|---|
resultHTML | string | Returns the error word highlighted string. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (complete)="onComplete($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onComplete(args) {
/* Do further actions here */
}
}
contextOpen
Triggers before context menu opening.
Name | Type | Description |
---|---|---|
selectedErrorWord | string | Returns the selected error word. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (contextOpen)="onContextOpen($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onContextOpen(args) {
/* Do further actions here */
}
}
contextClick
Triggers when the context menu item clicked.
Name | Type | Description |
---|---|---|
selectedValue | string | Returns the selected error word. |
selectedOption | string | Returns the selected option in the context menu. |
targetContent | string | Returns the input string. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (contextClick)="onContextClick($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onContextClick(args) {
/* Do further actions here */
}
}
dialogBeforeOpen
Triggers before the spell check dialog opens.
Name | Type | Description |
---|---|---|
spellCheckDialog | object | Returns the spell check window details. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogBeforeOpen)="onDialogBeforeOpen($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onDialogBeforeOpen(args) {
/* Do further actions here */
}
}
dialogOpen
Triggers after the spell check dialog opens.
Name | Type | Description |
---|---|---|
targetText | string | Returns the target input. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogOpen)="onDialogOpen($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onDialogOpen(args) {
/* Do further actions here */
}
}
dialogClose
Triggers when the spell check dialog closed.
Name | Type | Description |
---|---|---|
updatedText | string | Returns the error corrected string. |
requestType | string | Returns the request type value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogClose)="onDialogClose($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onDialogClose(args) {
/* Do further actions here */
}
}
validating
Triggers when the spell check control performing the spell check operations such as ignore, ignoreAll, change, changeAll and addToDictionary.
Name | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | object | Event parameters when ignore the error word once:
|
|||||||||||||||||||||||||||
argument | object | Event parameters when ignore all the occurrences of an error word:
|
|||||||||||||||||||||||||||
argument | object | Event parameters when changing the error word occurrence once:
|
|||||||||||||||||||||||||||
argument | object | Event parameters when changing all the occurrences of an error word:
|
|||||||||||||||||||||||||||
argument | object | Event parameters when adding the error word into the dictionary file:
|
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (validating)="onValidating($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onValidating(args) {
/* Do further actions here */
}
}
targetUpdating
Triggers before loading the target HTML element text into the dialog sentence area.
Name | Type | Description |
---|---|---|
previousElement | Object | Returns the previous target element value. |
currentElement | Object | Returns the current target element value. |
targetHtml | string | Returns the target html value. |
cancel | boolean | Returns the cancel option value. |
model |
|
Returns the SpellCheck model. |
type | string | Returns the name of the event. |
Example
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (targetUpdating)="onTargetUpdating($event)"></ej-spellcheck>
export class AppComponent {
public DictionarySettings: any;
constructor() {
this.DictionarySettings = {
dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
};
}
onTargetUpdating(args) {
/* Do further actions here */
}
}