All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.

Spell Check

  • 4 minutes to read

The RichEdit control allows you to use third-party tools to implement spell checking. Use the client spellCheck option or the server SpellCheck(Action<SpellCheckBuilder>) method (for .NET Core) to specify the following settings:

Client Property .NET Core Server Method Description
enabled Enabled(Boolean) Specifies whether the spell check is enabled.
checkWordSpelling CheckWordSpelling(String) A function that checks a word.
suggestionCount SuggestionCount(Int32) The maximum number of suggested words that can be displayed in the context menu.
addWordToDictionary AddWordToDictionary(String) A function that is called when a user clicks the Add to Dictionary context menu command.

Context menu with suggested words

TIP

If your application is built on the Angular framework, refer to following section for instructions on how to implement spell checking in the RichEdit: Angular Application - Spell Check.

Create an Nspell Bundle for the RichEdit

The RichEdit npm package includes a webpack configuration file that allows you to compile the nspell library and dictionaries into a package bundle. The configuration file references the English dictionary by default.

Follow the steps below to compile the bundle.

  1. Run the following command within the node_modules/devexpress-richedit directory:

    npm i --save-dev
    

    If you need additional dictionaries, install them as follows:

    npm i dictionary-fr
    
  2. Add the import directive for every additional dictionary to the node_modules/devexpress-richedit/bin/nspell-index.js file.

  3. Run the following command that builds an NSpell bundle according to the node_modules/devexpress-richedit/bin/nspell.webpack.config.js configuration file:

    npm run build-nspell
    

    The command creates the node_modules/devexpress-richedit/dist/custom/nspell.js file. A script in the file appends the NSpell object to the JavaScript window object.

Use Nspell With Web Worker

  1. Create the spell-checker-worker.js file with the following content:

    importScripts('./nspell.js');
    var checkers;
    
    function checkWord(word) {
        for(var i = 0; i < checkers.length; i++)
            if(checkers[i].correct(word))
                return true;
        return false;
    }
    
    onmessage = function(e) {
        if (!checkers) {
            checkers = [];
            NSpell.dictionaries.forEach(function (dic) {
                checkers.push(new NSpell.nspell(dic));
            });
        }
        switch(e.data.command) {
            case 'checkWord': {
                var isCorrect = checkWord(e.data.word);
                postMessage({
                    id: e.data.id,
                    isCorrect: isCorrect,
                    suggestions: isCorrect ? undefined : checkers[0].suggest(e.data.word),
                });
                break;
            }
            case 'addWord': {            
                checkers[0].add(e.data.word);
                break;
            }
        }
    };
    
  2. Place the nspell.js and spell-checker-worker.js files into the directory that contains the control scripts (wwwroot for .NET Core, Scripts for MVC and Web Forms).

  3. For an application on a client framework, add the following code to the page that contains the RichEdit control:

    var spellCheckerWorker = null;
    var spellCheckerCallbacks = Object.create(null);
    var spellCheckerWorkerCommandId = 0;
    ...
    options.spellCheck.enabled = true;
    options.spellCheck.suggestionCount = 5;
    options.spellCheck.checkWordSpelling = function (word, callback) {
        if (!spellCheckerWorker) {
            var myDictionary = JSON.parse(localStorage.getItem('myDictionary')) || [];
            spellCheckerWorker = new Worker('./spell-checker-worker.js');
            myDictionary.forEach(function (word) {
                spellCheckerWorker.postMessage({
                    command: 'addWord',
                    word: word,
                });
            });
    
            spellCheckerWorker.onmessage = function (e) {
                var savedCallback = spellCheckerCallbacks[e.data.id];
                delete spellCheckerCallbacks[e.data.id];
                savedCallback(e.data.isCorrect, e.data.suggestions);
            };
        }
    
        var currId = spellCheckerWorkerCommandId++;
        spellCheckerCallbacks[currId] = callback;
        spellCheckerWorker.postMessage({
            command: 'checkWord',
            word: word,
            id: currId,
        });
    };
    options.spellCheck.addWordToDictionary = function(word) {
        var myDictionary = JSON.parse(localStorage.getItem('myDictionary')) || [];
        myDictionary.push(word);
        localStorage.setItem('myDictionary', JSON.stringify(myDictionary));
    
        spellCheckerWorker.postMessage({
            command: 'addWord',
            word: word,
        });
    };
    

    For an application on the .NET Core framework, add a script file with the following content into the wwwroot directory and specify spell checking options in the RichEdit builder object:

    function checkWordSpelling(word, callback) {
        var spellCheckerWorker = null;
        var spellCheckerCallbacks = Object.create(null);
        var spellCheckerWorkerCommandId = 0;
        if (!spellCheckerWorker) {
            var myDictionary = JSON.parse(localStorage.getItem('myDictionary')) || [];
            spellCheckerWorker = new Worker('./spell-checker-worker.js');
            myDictionary.forEach(function (word) {
                spellCheckerWorker.postMessage({
                    command: 'addWord',
                    word: word,
                });
            });
    
            spellCheckerWorker.onmessage = function (e) {
                var savedCallback = spellCheckerCallbacks[e.data.id];
                delete spellCheckerCallbacks[e.data.id];
                savedCallback(e.data.isCorrect, e.data.suggestions);
            };
        }
    
        var currId = spellCheckerWorkerCommandId++;
        spellCheckerCallbacks[currId] = callback;
        spellCheckerWorker.postMessage({
            command: 'checkWord',
            word: word,
            id: currId,
        });
    };
    function addWordToDictionary(word) {
        var myDictionary = JSON.parse(localStorage.getItem('myDictionary')) || [];
        myDictionary.push(word);
        localStorage.setItem('myDictionary', JSON.stringify(myDictionary));
    
        spellCheckerWorker.postMessage({
            command: 'addWord',
            word: word,
        });
    };
    
    <script src="~/rich-scripts.js"></script>
    ...
    @(Html.DevExpress().RichEdit("richEdit")
        .SpellCheck (s => {
            s.Enabled(true);
            s.SuggestionCount(5);
            s.AddWordToDictionary("addWordToDictionary");
            s.CheckWordSpelling("checkWordSpelling");
        })
    )