Localization

28 Jun 201712 minutes to read

SpellCheck dialog mode comes with default localization support which allows it to customize the display of text within the SpellCheck dialog in a user-specific culture and locale. The SpellCheck control can be localized in specific culture using the common API locale along with the collection of localized words defined for that culture using the ej.SpellCheck.Locale [culture-code].

By default, the SpellCheck control is localized in en-US culture. Please find the following table lists the default keywords and its localized text values for en-US culture.

Locale key words	Text
SpellCheckButtonText	Spelling:
NotInDictionary	Not in Dictionary:
SuggestionLabel	Suggestions:
IgnoreOnceButtonText	Ignore Once
IgnoreAllButtonText	Ignore All
AddToDictionary	Add to Dictionary
ChangeButtonText	Change
ChangeAllButtonText	Change All
CloseButtonText	Close
CompletionPopupMessage	Spell check is complete
CompletionPopupTitle	Spell check
Ok	OK
NoSuggestionMessage	No suggestions available
NotValidElement	Specify the valid control id or class name to spell check

To localize SpellCheck into any particular culture, it is necessary to refer the culture-specific script files in your application after the reference of ej.web.all.min.js file, which are available under the following location.

<Installed location>\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\scripts\i18n

The following code example shows how to localize the SpellCheck control in fr-FR culture.

HTML

<div ng-controller="spellcheckCtrl">
    <div id="SpellCheck" contenteditable="true" ej-spellcheck e-dictionarysettings="dictionarySettings" e-locale="fr-FR">
        Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum,Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.
    </div>
    <button id="CheckSpell" ej-button e-text="Spell Check" e-click="checkErrors"></button>
</div>

JAVASCRIPT

syncApp.controller('spellcheckCtrl', function ($scope) {
    $scope.dictionarySettings = {
		dictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords",
        customDictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary"
	};
    $scope.checkErrors = function (e) {
        var spellObj = $("#SpellCheck").data("ejSpellCheck");
        spellObj.showInDialog();
    }
    ej.SpellCheck.Locale["fr-FR"] = {
            SpellCheckButtonText: "Orthographe",
            NotInDictionary: "Pas dans le dictionnaire",
            SuggestionLabel: "Suggestions",
            IgnoreOnceButtonText: "Ignorer une fois",
            IgnoreAllButtonText: "Ignorer tout",
            AddToDictionary: "Ajouter au dictionnaire",
            ChangeButtonText: "Changement",
            ChangeAllButtonText: "Tout modifier",
            CloseButtonText: "Fermer",
            CompletionPopupMessage: "Vérification orthographique est terminée",
            ErrorPopupMessage: "Vérification orthographique est pas terminée",
            CompletionPopupTitle: "Vérification orthographique alerte",
            OK: "D'accord",
            NoSuggestionMessage: "Aucune suggestion disponible",
        };
});

NOTE

Refer the ej.culture.fr-FR.min.js file in your HTML application and also define the locale property for the SpellCheck control with the appropriate culture-code [fr-FR].

For further information on how to refer the required culture scripts into your application, refer here.

Localizing Specific Words

To customize or localize only some specific words in the default ej.SpellCheck.Locale["en-US"] collection, the words to be localized/customized can be defined in a separate variable and then extended to the original collection as depicted in the following code example.

HTML

<div ng-controller="spellcheckCtrl">
    <div id="SpellCheck" contenteditable="true" ej-spellcheck e-dictionarysettings="dictionarySettings">
        Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum,Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.
    </div>
    <button id="CheckSpell" ej-button e-text="Spell Check" e-click="checkErrors"></button>
</div>

JAVASCRIPT

syncApp.controller('spellcheckCtrl', function ($scope) {
    $scope.dictionarySettings = {
		dictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords",
        customDictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary"
	};
    $scope.checkErrors = function (e) {
        var spellObj = $("#SpellCheck").data("ejSpellCheck");
        spellObj.showInDialog();
    }
    
    var customizationMessage = {
		CompletionPopupMessage: "Completed",
	};
	// Extend only the required changes to the original locale collection
	$.extend(ej.SpellCheck.Locale["en-US"], customizationMessage);
});