ejSpellCheck

The spell check control will be using to check/correct the spelling of words from a given content.

Syntax

  • javascript
  • $(element).ejSpellCheck()

    Example

  • html
  • <ej-spellcheck id="SpellCheck"></ej-spellcheck>
  • ts
  • 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

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings.dictionaryUrl]="DictionaryUrl"></ej-spellcheck>
  • ts
  • 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

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    
    }

    misspellWordCss string

    To display the error word in a customized style.

    Default Value

    • “e-errorword”

    Example - To display the error word in green color

  • html
  • <ej-spellcheck id="SpellCheck" misspellWordCss="highlight" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
    
    <style type="text/css">
        .highlight {
            color: green;
        }
    </style>
  • 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"
            };
        }
    
    }

    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.

  • html
  • <ej-spellcheck id="SpellCheck" locale="fr-FR" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [maxSuggestionCount]="SuggestionCount" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    
    }

    ignoreWords array

    To ignore the words from the error word consideration.

    Default Value

    • []

    Example - To set the ignoreWords

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreWords]="IgnoreWords" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [contextMenuSettings.enable]="ContextMenuEnable" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    
    }

    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

  • javascript
  • [
            { id: "IgnoreAll", text: "Ignore All" },
            { id: "AddToDictionary", text: "Add To Dictionary" }
        ]

    Example - To add custom context menu option to the SpellCheck

  • html
  • <ej-spellcheck id="SpellCheck" [contextMenuSettings]="ContextMenuSettings" [dictionarySettings]="DictionarySettings" (contextClick)="onCustomMenuClick($event)"></ej-spellcheck>
  • 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);
            }
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreAlphaNumericWords]="AlphaNumericWords" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreEmailAddress]="IgnoreEmailAddress" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreMixedCaseWords]="MixedCaseWords" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreUpperCase]="IgnoreUpperCase" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreUrl]="IgnoreUrl" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [ignoreSettings.ignoreFileNames]="IgnoreFileNames" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [isResponsive]="Responsive" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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.

  • html
  • <ej-spellcheck id="SpellCheck" [enableValidateOnType]="EnableValidateOnType" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    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)

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [enableAsync]="EnableAsync" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
  • 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"
            };
        }
    }

    Methods

    showInDialog()

    Open the dialog to correct the spelling of the target content.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
    
    <script type="text/javascript">
        var schObj = $("#SpellCheck").data("ejSpellCheck");
        schObj.showInDialog(); // Open the dialog mode
    </script>
  • 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"
            };
        }
    }

    validate()

    Highlighting the error word in the target area itself and correct the spelling using the context menu.

    Example

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <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>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
    
    <script type="text/javascript">
        var schObj = $("#SpellCheck").data("ejSpellCheck");
        schObj.addToDictionary("textarea");
    </script>
  • 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"
            };
        }
    }

    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

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings"></ej-spellcheck>
    
    <script type="text/javascript">
        var schObj = $("#SpellCheck").data("ejSpellCheck");
        schObj.getSuggestionWords("textarea");
    </script>
  • 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"
            };
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionSuccess)="onActionSuccess($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionBegin)="onActionBegin($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (actionFailure)="onActionFailure($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (start)="onStart($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (complete)="onComplete($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (contextOpen)="onContextOpen($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (contextClick)="onContextClick($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogBeforeOpen)="onDialogBeforeOpen($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogOpen)="onDialogOpen($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (dialogClose)="onDialogClose($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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:
    Name Type Description
    cancel boolean Returns the cancel option value.
    ignoreWord string Returns the error word to ignore.
    targetContent string Returns the target content.
    index number Returns the index of an error word.
    model object Returns the SpellCheck model.
    requestType string Returns the validating request type.
    type string Returns the name of the event.
    argument object Event parameters when ignore all the occurrences of an error word:
    Name Type Description
    cancel boolean Returns the cancel option value.
    ignoreWord string Returns the error word to ignore.
    targetContent string Returns the target content.
    model object Returns the SpellCheck model.
    requestType string Returns the validating request type.
    type string Returns the name of the event.
    argument object Event parameters when changing the error word occurrence once:
    Name Type Description
    cancel boolean Returns the cancel option value.
    changeableWord string Returns the error word to change.
    targetContent string Returns the target content.
    changeWord string Returns the change word to replace the error word.
    index number Returns the index of an error word.
    model object Returns the SpellCheck model.
    requestType string Returns the validating request type.
    type string Returns the name of the event.
    argument object Event parameters when changing all the occurrences of an error word:
    Name Type Description
    cancel boolean Returns the cancel option value.
    changeableWord string Returns the error word to change.
    targetContent string Returns the target content.
    changeWord string Returns the change word to replace the error word.
    model object Returns the SpellCheck model.
    requestType string Returns the validating request type.
    type string Returns the name of the event.
    argument object Event parameters when adding the error word into the dictionary file:
    Name Type Description
    cancel boolean Returns the cancel option value.
    customWord string Returns the custom word to add into dictionary file.
    model object Returns the SpellCheck model.
    requestType string Returns the validating request type.
    type string Returns the name of the event.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (validating)="onValidating($event)"></ej-spellcheck>
  • 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 */
        }
    }

    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.

    Example

  • html
  • <ej-spellcheck id="SpellCheck" [dictionarySettings]="DictionarySettings" (targetUpdating)="onTargetUpdating($event)"></ej-spellcheck>
  • 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 */
        }
    }