CODEWITHSUNDEEP
javascripttinymce-4voyager
Adam
Adam

Reputation: 29099

TinyMCE: How to add plugin after init?

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.

Upvotes: 5

Views: 3901

Answers (3)

Adam
Adam

Reputation: 29099

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

Upvotes: 0

Guillermo Espert
Guillermo Espert

Reputation: 1310

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

Upvotes: 6

Michael Fromin
Michael Fromin

Reputation: 13744

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.

Upvotes: 3

Related Questions