Blazor Rich Text Editor – Spell Check (v22.2)

The DevExpress Rich Text Editor for Blazor (v22.2) ships with built-in spell check capabilities and includes a customizable spell check service. In this blog post, we'll describe our built-in service and how to customize it as requirements dictate.

Enable Spell Checking in Your Blazor App

Our Blazor Rich Text Editor's built-in spell check service includes a dictionary for the American English language. By default, the service can detect spelling errors and suggest corrections (but it does not allow users to add words to the dictionary itself). To check spelling, you can use this service as is. If using the service as is, configuration involves two steps:

1. Call the AddSpellCheck extension method in the Program.cs file to register the built-in spell check service:

   using DevExpress.Blazor.RichEdit.SpellCheck;
   public class Startup {
   	public void ConfigureServices(IServiceCollection services) {
   		builder.Services.AddDevExpressBlazor().AddSpellCheck();
   	}
   }
           

2. Set the component's CheckSpelling property to true to enable the spell check feature:

   <DxRichEdit CheckSpelling="true" />

Once complete, the built-in service checks spelling against its default dictionary.

Customize Our Built-in Spell Check Service

If you need to check spelling in multiple languages and/or allow users to add words to a dictionary, you can configure our built-in spell check service as follows...

You can access and customize service options within the AddSpellCheck extension method call. The Dictionaries option allows you to add a simple, Hunspell, or ISpell dictionary in addition to the default dictionary. To disable the default dictionary, simply add another dictionary for the same culture ("en-US"). Do not forget to assign a file provider to the FileProvider property before you add a dictionary, so that the service can access dictionary files.

builder.Services.AddDevExpressBlazor().AddSpellCheck(opts => {
    opts.FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "Data", "Dictionaries"));
    opts.Dictionaries.Add(new Dictionary {
        DictionaryPath = "de\\de.dic",
        AlphabetPath = "de\\alphabet.txt",
        Culture = "de-DE"
    });
    opts.Dictionaries.Add(new Dictionary {
        DictionaryPath = "fr\\fr.dic",
        AlphabetPath = "fr\\alphabet.txt",
        Culture = "fr-FR"
    });
    // …
});

To save new words to the dictionary, create a method that accepts the selected word and the document's culture, and writes the word to the appropriate dictionary storage. Once complete, assign this method to the AddToDictionaryAction property:

builder.Services.AddDevExpressBlazor().AddSpellCheck(opts => {
    //…
    opts.AddToDictionaryAction = (word, culture) => {
        string path;
        switch (culture.Name){
            case "de-DE":
                path = opts.FileProvider.GetFileInfo("de//de.dic").PhysicalPath;
                File.AppendAllText(path, "\n" + word);
                break;
            case "fr-FR":
                path = opts.FileProvider.GetFileInfo("fr//fr.dic").PhysicalPath;
                File.AppendAllText(path, "\n" + word);
                break;
            default:
                break;
        };
    };
}

Once you add and customize the built-in service, it’s time to configure our Blazor Rich Text Editor component. Set the CheckSpelling property to true to enable spell checking. Assign the name of an open document’s culture to the component’s DocumentCulture property to check spelling against the appropriate dictionary.

<DxRichEdit @ref="richEdit" CheckSpelling="true" DocumentCulture="@documentCulture" />
@code {
    DxRichEdit richEdit;
    string documentCulture = "en-US";
}

The Rich Text Editor checks spelling against all dictionaries when the DocumentCulture property corresponds to an invariant culture. Otherwise, the Rich Text Editor uses only the dictionaries whose culture is invariant or matches the document’s culture. So, update the DocumentCulture property value after a document is loaded in the Rich Text Editor.

await richEdit.LoadDocumentAsync("Data/French.docx");
documentCulture = "fr-FR";

When you are ready to introduce spell checking in your Blazor app (against multiple languages), please refer to the following repository for more information (includes complete source code): https://github.com/DevExpress-Examples/blazor-dxrichedit-spell-check.

Note: If our built-in service does not address all your requirements, you can also implement a custom spell check service. Refer to the following help topic for more information: ISpellCheckService.