HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

TinyMCE spellchecker

Describes the Optimizely Spellchecker for TinyMCE, which adds spell-checking functionality for the rich-text editor in Optimizely Content Management System (CMS) 13, with possibility to configure language dictionaries.

📘

Version information

EPiServer.TinyMCESpellChecker 3.0.2 works only with EPiServer.CMS.TinyMce 3.x.

EPiServer.CMS.TinyMce 4.x and above have the spellchecker built into TinyMCE. You do not need to install spellchecker for TinyMCE 4.x; just add the following code in startup.cs to enable spellchecker:

services.AddTinyMce().AddTinyMceSpellChecker();

Requirements

  • No additional license fee.
  • An Optimizely Content Management System (CMS) 13 or Optimizely Customized Commerce installation.
  • See Apps platform compatibility for package and version information. 
  • Installed EPiServer.CMS.TinyMce NuGet package.

Installation

In the Startup.cs file, add the following call to AddTinyMceSpellChecker:

services.AddMvc();
services.AddAlloy();
services.AddCmsHost()
  .AddCmsHtmlHelpers()
  .AddCmsUI()
  .AddAdmin()
  .AddVisitorGroupsUI()
  .AddTinyMce()
  .AddTinyMceSpellChecker()
  .AddAdminUserRegistration(options => options.Behavior = RegisterAdminUserBehaviors.Enabled |
                                                          RegisterAdminUserBehaviors.LocalRequestsOnly);

Configuration

This topic describes configuring dictionaries for the Optimizely spellchecker for the TinyMCE add-on. The add-on comes with predefined dictionaries, and you can add languages.

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)

Add dictionaries

You can add additional dictionaries to the website. You can download dictionary file sources, for example, from Mozilla Language Tools. Language packages from these sources are not specifically designed for spellchecker, but you can extract and use them.

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

Important

  • 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 Optimizely. 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 Optimizely is en-US. While no.dic might cover the Norwegian Bokmål variation, which in Optimizely 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.

Use spellchecker for specific properties

The spellchecker for TinyMCE is automatically applied to 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 main body of the product page, do the following in the Startup.cs file:

const string SpellCheckerPluginName = "spellchecker";
services.Configure<TinyMceConfiguration>(config =>
{
    var defaultSettings = config.Default();

    // Add the plugin but NOT to the default toolbar
    defaultSettings.AddTinyMceSpellCheckerPlugin();

    // Apply spellchecker toolbar only for ProductPage.MainBody
    var defaultToolbar = defaultSettings["toolbar"] as string[] ?? [];
    var toolbarWithSpellChecker = defaultToolbar.Length > 0
        ? defaultToolbar[0] + " " + SpellCheckerPluginName
        : SpellCheckerPluginName;

    config.For<ProductPage>(p => p.MainBody)
        .Toolbar(toolbarWithSpellChecker);
});