HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

Optimizely Spellchecker for TinyMCE

This topic describes the Optimizely Spellchecker for TinyMCE, which adds spell-checking functionality for the built-in rich-text editor in Optimizely CMS, with possibility to configure language dictionaries.

See also: Blog post: Configuring Spellchecker

Requirements

Installation

  • Versions 7.5 and higher are installed through NuGet.
  • Version 7 is installed and updated through one-click installation.

Configuration

This topic describes how to configure dictionaries for the Episerver Spellchecker for TinyMCE add-on. The add-on comes with a set of predefined dictionaries, and you can add languages.

📘

Note

Episerver Spellchecker for TinyMCE is renamed to Optimizely Spellchecker for TinyMCE.

Default language dictionaries

The following dictionaries are included with the add-on by default:

  • Danish (da)
  • German (de)
  • English (en-US)
  • Spanish (es)
  • French (fr)
  • Italian (it)
  • Dutch (nl)
  • Norwegian Bokmål (nb-NO)
  • Norwegian Nynorsk (nn-NO)
  • Polish (pl)
  • Portuguese (pt)
  • Russian (ru)
  • Swedish (sv)

Adding dictionaries

You can add additional dictionaries to the website. You can download dictionary file sources, for example, from OpenOffice Extensions or Mozilla Language Tools. Language packages from these sources are not specifically designed for Spellchecker, but can be extracted and used.

  1. Download the desired language package. Rename the downloaded file to .zip and extract the .aff and .dic files within.
  2. Create a new folder named by language code (for example, en-GB) in the add-on folder \EPiServer.TinyMCESpellChecker\Dictionaries\. Using this path, you can update the add-on without having to add the dictionaries again.
  3. Paste the extracted .aff and .dic files into the newly created folder.

🚧

Important notifications

  • For a dictionary to become available for selection in the spellchecker language list, the language must be enabled on the website.
  • The name of the dictionary file should match the language code of the language branch enabled in Episerver. For example, if you enabled en-GB, name your dictionary files en-GB.dic/.aff.
  • Check which language variations your dictionaries cover. A dictionary named en.dic might cover US English, which in Episerver is en-US. While no.dic might cover the Norwegian Bokmål variation, which in Episerver is nb-NO. Most downloadable dictionaries include a README containing this type of information.
  • Only place one dictionary in each language folder to avoid conflicts. For example, do not place both en.dic and en-US.dic in the en folder.

Using Spellchecker for specific properties

The Spellchecker for TinyMCE is automatically applied to all XHTMLString properties by default, but you can configure your site to use Spellchecker for one or more properties only. For example, if you want to use Spellchecker only for the MainBody of the ProductPage, follow these steps:

  1. Create a class which implements the IConfigurableModule interface.
  2. Implement the class as below:
[ModuleDependency(typeof(EPiServer.TinyMCESpellChecker.InitializationModule))]
        public class CustomizedTinyMceSpellCheckerInitialization : IConfigurableModule
        {
            private ServiceConfigurationContext _serviceConfigurationContext;
            private const string SpellCheckerPluginName = "spellchecker";
        
            public void Initialize(InitializationEngine context)
            {
                _serviceConfigurationContext.Services.Configure<TinyMceConfiguration>(config =>
                {
                    var defaultSettings = config.Default();
                    var defaultToolbarSettings = defaultSettings["toolbar"] as string[] ?? new string[1];
        
                    // Remove spellchecker from toolbar for default configuration
                    Regex rgx = new Regex([email protected]"\b{SpellCheckerPluginName}\b\s+|\s+\b{SpellCheckerPluginName}\b$");
                    var toolbarWithSpellChecker = defaultToolbarSettings[0];
                    defaultSettings["toolbar"] = rgx.Replace(toolbarWithSpellChecker, "");
        
                    // Apply Spellchecker only for MainBody of ProductPage
                    config.For<ProductPage>(p => p.MainBody)
                        .Toolbar(toolbarWithSpellChecker);
                });
            }
        
            public void Uninitialize(InitializationEngine context)
            {
            }
        
            public void ConfigureContainer(ServiceConfigurationContext context)
            {
            _serviceConfigurationContext = context;
            }
        }

Breaking changes for Spellchecker for TinyMCE 2

📘

Note

Episerver Spellchecker for TinyMCE is renamed to Optimizely Spellchecker for TinyMCE.

The Optimizely Spellchecker for TinyMCE 2 includes the following breaking changes:

  • The NuGet package for Episerver Spellchecker for TinyMCE 2 (EPiServer.TinyMCESpellChecker.2.x.x) depends on Episerver TinyMCE 2 (EPiServer.CMS.TinyMce 2.x).

  • The class SpellCheckerPlugin is removed.

  • Use the custom Spellchecker’s plugin.min.js file. 

  • Update the class SpellCheckerRequest and move it to namespace EPiServer.TinyMCESpellChecker.Models.

  • The classes CheckSpellingResponse and SpellSuggestionResponse have been removed.

  • The SpellChecker button is automatically added to TinyMce editor. Previously, this had to be added from the admin view.

  • The following new interfaces were added:

  • ISpellCheckerService
    Implement this interface to handle parsing spellchecker requests (the request is in URL encoded format; previously, the request was in JSON format), and getting correct suggestions for a list of misspelled words. The default implementation is SpellCheckerService.

  • ISpellCheckerDictionary
    Implement this interface to handle spell checking and getting correct suggestions for a word. The default implementation is SpellCheckerDictionary.


Did this page help you?