Getting Started

18 Dec 20186 minutes to read

To render the SpellCheck control, the following list of external dependencies are needed,

jQuery - 1.7.1 and later versions

The other required internal dependencies are tabulated below,

File	Description/Usage
ej.core.min.js	Must be referred always first before using all the JS controls.
ej.data.min.js	Used to handle data operation and should be used while binding data to JS controls.
ej.spellcheck.min.js	SpellCheck core script file.
ej.scroller.js ej.button.js ej.dialog.js ej.menu.js ej.listbox.js ej.draggable.js ej.globalize.js	These files are referred for proper working of the sub-controls used within SpellCheck.

NOTE

SpellCheck uses one or more sub-controls, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the SpellChecker, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Script/CSS Reference

Create a new HTML file and include the below initial code.

HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title> </title>
    </head>
    <body>
    </body>
</html>

Refer the CSS file from the specific theme folder to your HTML file within the head section. Refer the built-in available themes from here.

HTML

<head>
    <meta charset="utf-8" />
    <title>Getting Started - SpellCheck</title>
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
</head>

Add links to the CDN Script files with other required external dependencies.

HTML

<head>
    <meta charset="utf-8" />
    <title>Getting Started - SpellCheck</title>
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
</head>

NOTE

Uncompressed version of library files are also available which is used for development or debugging purpose and can be generated from the custom script here.

Control Initialization

Create a div element within the body section of the HTML document, where the SpellCheck needs to be rendered.

HTML

<body>
	<div id="SpellCheck"></div>
</body>

Initialize the SpellCheck control by adding the following script code to the body section of the HTML document.

HTML

<!--Container for ejSpellCheck widget-->
<div id="SpellCheck"></div>
	
<script type="text/javascript">
$(function() { // Document is ready    
    $("#SpellCheck").ejSpellCheck();
});	
</script>

Service Reference

Assign the service method (CheckWords) path reference to the property dictionaryUrl of dictionarySettings, which is mandatory to check the spelling of the word.

The CheckWords method will perform the splitting of target sentence into separate words and check each word is that an erroneous or not. If the word is erroneous fetching the possible suggestions for it and returns those details as a result.

HTML

<!--Container for ejSpellCheck widget-->
<div id="SpellCheck"></div>
	
<script type="text/javascript">
$(function() { // Document is ready    
    $("#SpellCheck").ejSpellCheck({
        dictionarySettings: {
            dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords"
        }
    });
});	
</script>

Spell Checking

To spell check the content of the target element, you need to add one button and calling any one of the SpellCheck method showInDialog or validate by clicking the button to highlight the error words.

The following code example depicts that checking the spelling of the target element through the “validate” method.

HTML

<div id="TextArea">
  It is a concept vehicle with Liquid Silver body color, 20-inch wheels, fabric folding roof, electrically-controlled hood, 4-cylinder 2.0 TDI engine rated 204 PS (150 kW; 201 hp)
  and 400  (295.02 lbf ft), diesel particulate filter and BlueTec emission control system, quattro permanent four-wheel drive system,
  Audi S tronic dual-clutch gearbox, McPherson-strut front axle and a four-link rear axle, Audi drive select system with 3 modes (dynamic, sport, efficiency),
  MMI control panel with touch pad and dual-view technology, sound system with the prominent extending tweeters.
</div>
<div>
      <input type="button" id="SpellCheck"/>
</div>
    
<script type="text/javascript">
            $("#TextArea").ejSpellCheck({
                 dictionarySettings: {
                     dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
                     customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
                 }
            });
            $("#SpellCheck").ejButton({ width: "200px", height: "25px", click: "showInContextMenu", text: "Spell check" });
            
            function showInContextMenu() {
                var spellObj = $("#TextArea").data("ejSpellCheck");
                spellObj.validate(); // highlighting the error word in the target area itself
            }
</script>

You can find the sample to getting start with the spellchecker here, which is prepared by following the above steps.