TinyMCE: How to add plugin after init?

Question

In the Voyager project they allow you to modify TinyMCE though a callback function:

function tinymce_init_callback(editor)
{
    //...
}

The methods of the editor are listed here.

I know that one usually list the plugins on init:

tinymce.init({
  plugins: [
    'image textcolor'
  ],

But is it possible to add a plugin like image with the editor object after the initialization? I couldn't find such a function in the docs.

Answer 1

This is my solution:

function tinymce_init_callback(editor)
{
  editor.remove();
  editor = null;

  tinymce.init({
    selector: 'textarea.richTextBox',
    skin: 'voyager',
    min_height: 600,
    resize: 'vertical',
    plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
    extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
    file_browser_callback: function (field_name, url, type, win) {
        if (type == 'image') {
            $('#upload_file').trigger('click');
        }
    },
    toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | codesample code',
    convert_urls: false,
    image_caption: true,
    image_title: true
  });
}

First I remove the existing instance of TinyMCE editor (created by Voyager) and later I create a new one with the plugins and parameters I want.

When the page loads and the new instance is created, TinyMCE searches for plugins in 'public/vendor/tcg/voyager/assets/js/plugins'. TinyMCE searches for plugin JavaScript files using the name 'plugin.js', but many of these plugin files are named 'plugin.min.js', causing many errors that disable the editor. One solution for this inconvenience is to rename all the plugin files to 'plugin.js'.

Answer 2

TinyMCE does not allow you load additional plugins after the editor is initialized. If you wanted to do this you would need to use the remove() API to remove the editor then you can use init() again with your new configuration to reload the editor.