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.

There are two ways you can do this:

Using TinyMCE 5 Builder

You can use TinyMCE 5 Builder and get a ready-to-work TinyMCE 5 package with already embedded plugins and a pre-generated config inside.

If you install TinyMCE 5 from scratch, simply copy the entire contents of the archive where you wanted place TimyMCE, and copy the config to your page, where you initialize it.

If you want to update the existing installation, copy only the plugins directory and also use the config prepared for you.

Manual installing of the plugin

The classic way to install suggests the following steps:

  1. Download our plugin and place it to the tinymce/plugins/ directory. For example, N1ED, Flmngr (file manager), ImgPen (image editor) and Translator are placed as follows:

    tinymce/
        plugins/
            N1ED/
            Flmngr/
            ImgPen/
            Translator/
  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 Flmngr ImgPen Translator"
    });

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

  3. Add new buttons on the toolbar.

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

    Among plugins in this example, only Translator has standard toolbar buttons. N1ED adds its own sidebar, and Flmngr attaches to the existing Browse files buttons in the image setting dialog and other places (for example, in the N1ED sidebar). And so does ImgPen. 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.