| layout | post |
|---|---|
| title | API reference for ejSpellCheck |
| description | What are the options, methods and events available in Essential JavaScript ejSpellCheck. |
| documentation | API |
| platform | angular-api |
| keywords | ejSpellCheck, API, Essential JS ejSpellCheck, SpellCheck |
The spell check control will be using to check/correct the spelling of words from a given content.
{% highlight javascript %}
$(element).ejSpellCheck()
{% endhighlight %}
{% highlight html %}
{% endhighlight %}
{% highlight ts %}
export class AppComponent {
constructor() { }
}
{% endhighlight %}
- 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}
It includes the service method path to find the error words and its suggestions also adding the custom word into the custom dictionary.
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:dictionarysettings-dictionaryurl}
The dictionaryUrl option accepts string, which is the method path to find the error words and get the suggestions to correct the errors.
- ""
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings.dictionaryUrl]="DictionaryUrl">
{% endhighlight %}
{% highlight ts %}
export class AppComponent {
public DictionaryUrl: any;
constructor() {
this.DictionaryUrl = "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords";
}
}
{% endhighlight %}
{:#members:dictionarysettings-customdictionaryurl}
The customDictionaryUrl option accepts string, which is the method path to add the error word into the custom dictionary.
- ""
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:misspellwordcss}
To display the error word in a customized style.
- "e-errorword"
{% highlight html %}
<ej-spellcheck id="SpellCheck" misspellWordCss="highlight" [dictionarySettings]="DictionarySettings">
<style type="text/css"> .highlight { color: green; } </style>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:locale}
Sets the specific culture to the SpellCheck.
- "en-US"
{% highlight html %}
<ej-spellcheck id="SpellCheck" locale="fr-FR" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
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.
{:#members:maxsuggestioncount}
To set the maximum suggestion display count.
- 6
{% highlight html %}
<ej-spellcheck id="SpellCheck" [maxSuggestionCount]="SuggestionCount" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:ignorewords}
To ignore the words from the error word consideration.
- []
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreWords]="IgnoreWords" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:contextmenusettings}
Holds all options related to the context menu settings of SpellCheck.
{:#members:contextmenusettings-enable}
When set to true, enables the context menu options available for the SpellCheck.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [contextMenuSettings.enable]="ContextMenuEnable" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:contextmenusettings-menuitems}
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.
-
{% highlight javascript %}
[ { id: "IgnoreAll", text: "Ignore All" }, { id: "AddToDictionary", text: "Add To Dictionary" } ]
{% endhighlight %}
{% highlight html %}
<ej-spellcheck id="SpellCheck" [contextMenuSettings]="ContextMenuSettings" [dictionarySettings]="DictionarySettings" (contextClick)="onCustomMenuClick($event)">
{% endhighlight %}
{% highlight ts %}
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);
}
}
}
{% endhighlight %}
{:#members:ignoresettings}
It helps to ignore the uppercase, mixed case words, alpha numeric words, file path and email addresses based on the property values.
{:#members:ignoresettings-ignorealphanumericwords}
When set to true, ignoring the alphanumeric words from the error word consideration.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreAlphaNumericWords]="AlphaNumericWords" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:ignoresettings-ignoreemailaddress}
When set to true, ignoring the Email address from the error word consideration.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreEmailAddress]="IgnoreEmailAddress" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:ignoresettings-ignoremixedcasewords}
When set to true, ignoring the MixedCase words from the error word consideration.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreMixedCaseWords]="MixedCaseWords" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:ignoresettings-ignoreuppercase}
When set to true, ignoring the UpperCase words from the error word consideration.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreUpperCase]="IgnoreUpperCase" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:ignoresettings-ignoreurl}
When set to true, ignoring the Url from the error word consideration.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreUrl]="IgnoreUrl" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:ignoresettings-ignorefilenames}
When set to true, ignoring the file address path from the error word consideration.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreFileNames]="IgnoreFileNames" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:isresponsive}
When set to true, allows the spellcheck to render based upon screen size.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [isResponsive]="Responsive" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:enablevalidateontype}
Gets or sets a value that indicates whether to enable the spellcheck operation on Enter/Space key-press.
- false
{% highlight html %}
<ej-spellcheck id="SpellCheck" [enableValidateOnType]="EnableValidateOnType" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#members:controlstovalidate}
It allows to spell check the multiple target HTML element's texts and correct its error words.
- null
{% highlight html %}
<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>
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.
<ej-spellcheck id="SpellCheck" controlsToValidate="control1,control2,control3" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
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.
{:#members:enableasync}
When set to true, allows sending Asynchronous ajax request for checking the spelling errors.
- true
{% highlight html %}
<ej-spellcheck id="SpellCheck" [enableAsync]="EnableAsync" [dictionarySettings]="DictionarySettings">
{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:showindialog}
Open the dialog to correct the spelling of the target content.
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<script type="text/javascript"> var schObj = $("#SpellCheck").data("ejSpellCheck"); schObj.showInDialog(); // Open the dialog mode </script>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:validate}
Highlighting the error word in the target area itself and correct the spelling using the context menu.
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<script type="text/javascript"> var schObj = $("#SpellCheck").data("ejSpellCheck"); schObj.validate(); // highlighting the error word in the target area itself </script>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:spellcheck}
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 |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<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>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:ignoreall}
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 |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<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>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:ignore}
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 |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<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>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:change}
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 |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<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>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
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.
{:#methods:changeall}
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 |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<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>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:addtodictionary}
To add the words into the custom dictionary.
| Name | Type | Description |
|---|---|---|
| customWord | string | Word to add into the dictionary file |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<script type="text/javascript"> var schObj = $("#SpellCheck").data("ejSpellCheck"); schObj.addToDictionary("textarea"); </script>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#methods:getsuggestionwords}
Retrieves the possible suggestion words for the error word passed as an argument.
| Name | Type | Description |
|---|---|---|
| errorWord | string | Error word to get the suggestions |
object
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings">
<script type="text/javascript"> var schObj = $("#SpellCheck").data("ejSpellCheck"); schObj.getSuggestionWords("textarea"); </script>{% endhighlight %}
{% highlight ts %}
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"
};
}
}
{% endhighlight %}
{:#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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionSuccess)="onActionSuccess($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionBegin)="onActionBegin($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionFailure)="onActionFailure($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (start)="onStart($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (complete)="onComplete($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (contextOpen)="onContextOpen($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (contextClick)="onContextClick($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogBeforeOpen)="onDialogBeforeOpen($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogOpen)="onDialogOpen($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogClose)="onDialogClose($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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:
|
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (validating)="onValidating($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}
{:#events: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 | object | Returns the SpellCheck model. |
| type | string | Returns the name of the event. |
{% highlight html %}
<ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (targetUpdating)="onTargetUpdating($event)">
{% endhighlight %}
{% highlight ts %}
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 */
}
}
{% endhighlight %}