Installing add-ons

How to extend TinyMCE 5 with add-ons

TinyMCE is a flexible editor that allows to add new features to it using add-ons (plugins).

A TinyMCE plugin is an additional package that adds new functions, widgets, toolbar buttons, menus etc.

Some add-ons come with TinyMCE 5, others should be downloaded individually. Also, you can write your own plugins for TinyMCE 5.

You can extend TinyMCE functionality using downloadable plugins. This requires copying files and configuring the initialization config of TinyMCE.

The classic way installing of the plugin

The classic way to install suggests the following steps:

  1. Download the plugin and place it to the tinymce/plugins/ directory. For example N1ED needs to be placed as follows:

    tinymce/
        plugins/
            n1ed/
  2. Add the add-ons to the plugins sections of your config among other plugins separating names with spaces.

    tinymce.init({
        selector: "#editor",
        plugins: "link n1ed" // link - built-in plugin, n1ed - newly installed, you can mix here any plugins
    });

    TinyMCE automatically loads the add-on upon start up, by locating its directory by name.

  3. Add new buttons on the toolbar. Some plugins like N1ED automatically add buttons to the toolbar, so here we just give a sample of configuration using some standard buttons:

    tinymce.init({
        selector: "#editor",
        plugins: "link n1ed",
        toolbar: "undo redo | bold italic backcolor | alignleft aligncenter" + 
                 "alignright alignjustify | bullist numlist"
    });
                

    You can find information about toolbar buttons a certain plugin adds in the documentation of the corresponding plugins or in the list of all TinyMCE 5 buttons

  4. Make additional configuring if the plugin requires that. For example, N1ED and Flmngr require you to install the shared server part to work with files and images on the backend. The process is described in this article: file management in TinyMCE.