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.

Turnspit

maybe you can add the Plugin instance directly on your editor.plugins object: editor.plugins['image'] = ..., but you'll have to find out how to obtain the instance of the plugin, maybe just a require/import ? – Ceremony

Answer 1

There was actually a merge request in 2020 which fixed this issue:

https://github.com/the-control-group/voyager/pull/4727

Now one can specify the plugins in the bread view like this:

{
    "tinymceOptions" : {
        "plugins": "image textcolor"
    }
}

See docs: https://voyager-docs.devdojo.com/bread/introduction-1/tinymce

Turnspit

Answer 2

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'.

Rovner

Answer 3

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.

Eadie