Rich Text Editor Plugins

Information on how to work with TinyMCE plugins in the rich text editor.

The global configuration of TinyMCE will be removed in Umbraco 14 in order to support more rich text editors in the future. Instead, a new extension type called “tinyMcePlugin” will be added.

Overview

The Rich Text Editor (RTE) in Umbraco is based on the open source editor TinyMCE. TinyMCE is a highly customizable editor, and it is possible to extend the functionality of the editor by adding plugins.

TinyMCE comes with a lot of plugins out of the box, but it is also possible to create your own plugins. This article will show you how to add a custom plugin to the rich text editor.

Open-Source Plugins

TinyMCE has a lot of open-source plugins available. You can find a list of these plugins on the TinyMCE website.

Premium Plugins

TinyMCE also has a number of premium plugins available. These plugins are only available for paid TinyMCE subscriptions.

Adding a Plugin

To enable plugins in the rich text editor, you need to add it to the Plugins array in the configuration of the rich text editor.

appsettings.json

{
  "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "Plugins": ["wordcount"],
        "CustomConfig": {
          "statusbar": true
        }
      }
    }
  }
}

The example above shows how to add the open-source Word Count Plugin to the rich text editor. The plugin is added to the Plugins array in the configuration. The plugin itself will be shown in the statusbar of the rich text editor, so the statusbar option is also added to the CustomConfig object.

Adding a premium plugin

To add a premium plugin, you need to add the plugin name to the Plugins array in the configuration of the rich text editor. You also need to add the "CloudApiKey" to the configuration.

{
  "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "CloudApiKey": "q8j4e5{...}w8c270p",
        "Plugins": ["powerpaste"],
        "CustomConfig": {
          "powerpaste_allow_local_images": "true",
          "powerpaste_word_import": "clean"
        }
      }
    }
  }
}

We have enabled the powerpaste plugin, and configured it to allow local images. It will prompt when pasting Word documents, but for HTML documents it will clean the HTML without prompting.

See all the available premium plugins.

You can go to TinyMCE Cloud and sign up for a free trial. You will get a Cloud API key that you can use to try out the premium plugins.

Creating a Custom Plugin

If you want to create your own plugin, you should in general follow the TinyMCE documentation. However, there are a few things you need to be aware of to load the plugin in Umbraco. See the example below.

Examples

Load a custom plugin that gives you the ability to interact with the global tinymce editor object.

Here we are loading a custom plugin called myrteplugin and adding a button to the editor called myrtebutton. When the button is clicked, it will insert the text Hello World! into the editor.

The text "Hello World!" shows up after clicking the button

appsettings.json

  "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "CustomConfig": {
          "external_plugins": "{\"myrteplugin\":\"/App_Plugins/MyRtePlugin/plugin.js\"}"
        },
        "Commands": [
          {
            "Alias": "myrtebutton",
            "Name": "My RTE Button",
            "Mode": "Insert"
          }
        ]
      }
    }
  }

App_Plugins/MyRtePlugin/plugin.js

'use strict'
;(function () {
    /**
     * @param {import('tinymce').TinyMCE} tinymce
     */
    function plugin(tinymce) {

        // Register a new plugin on the PluginManager
        tinymce.PluginManager.add('myrteplugin', function (editor) {

            // Register a new button
            editor.ui.registry.addButton('myrtebutton', {
                text: 'My RTE Button',
                icon: 'code-sample',

                // When the button is clicked, insert 'Hello World!' into the editor
                onAction: function () {
                    editor.insertContent('Hello World!')
                }
            })
        })
    }

    // Initialize the plugin only if the global `tinymce` object exists
    if (window && 'tinymce' in window) {
        plugin(window.tinymce)
    }
})();

The button must be added to the toolbar in the rich text editor configuration.

Enable the button in the rich text editor configuration

You can go to any Document Type that uses the rich text editor and click the button to insert the text Hello World! after.

Learn more

• TinyMCE documentation

• TinyMCE tutorial: Creating a plugin