ModX3: Custom plugin for TinyMCE Rich Text Editor failing to initialize

I created a custom element in TinyMCE Rich Text Editor a number of months ago.

Original Thread

But since I updated to 3.0, I’m getting this message “Failed to initialize plugin: download”. Everything is still in place where it should be and the system settings are still set properly. I’m not sure what could be wrong.

I don’t think this is a MODX3 problem.

I believe the version of TinyMCE has changed since the original thread and therefore the plugin code has to be changed as well to work with the current version (v5).

Here is some code (adapted from here) that more or less should do what the original code did.
But I haven’t looked much into it. You have to test it and read the TinyMCE docs.

tinymce.PluginManager.add('download', function(editor, url) {
    var openDialog = function () {
      return editor.windowManager.open({
        title: 'Download',
        body: {
          type: 'panel',
          items: [
            {
                type: 'urlinput',
                filetype: 'image',
                name: 'image_path',
                label: 'path to image'
            },
            {
                type: 'urlinput',
                filetype: 'file',
                name: 'file_path',
                label: 'path to file'
            },
            {
                type: 'input',
                name: 'text',
                label: 'text here'
            }
          ]
        },
        buttons: [
          {
            type: 'cancel',
            text: 'Close'
          },
          {
            type: 'submit',
            text: 'Save',
            primary: true
          }
        ],
        onSubmit: function (api) {
          var data = api.getData();
          /* Insert content when the window form is submitted */
          editor.insertContent('[[download? &thumb=`' + data.image_path.value + '` &file=`' + data.file_path.value + '` &alt=`' + data.text + '`]]');
          api.close();
        }
      });
    };
    /* Add a button that opens a window */
    editor.ui.registry.addButton('download', {
      text: 'Download',
      onAction: function () {
        /* Open window */
        openDialog();
      }
    });
  });

I’ve done all that. I’ve reviewed the docs and it still will not initialize.

Also, the version of RTE that is installed is not v5. It’s 4.3.4. I don’t know if that matters or not. This is the latest version modx has.

Not sure where you got this number from.


I tested it on MODX 3 (3.0.0-pl) with the current version of the “TinyMCE Rich Text Editor” extra (2.0.7-pl).
This MODX extra uses the TinyMCE javascript library with the version 5.9.2.

My mistake, that was the version of TinyMCE that i had installed.

I’ve even tried renaming it to “downloads” instead and it still will not initialize. I’m completely stumped why it will not work. I have it also added to both tinymcerte.plugins and tinymcerte.toolbar1. But it will not show up.

Hi, i had same problem, tried so many codes from internet… after hours it run! I think the problem might be with icon:false or onclick but I’m not sure. Wasted too much time to get what was wrong, and I’m happy it’s working.
In my example it puts a full chunk code with a link part from YT, so user doesnt have to know how chunks snippets etc. works and know shortcodes either.

tinymce.PluginManager.add('ytlink', function(editor, url) {
  var openDialog = function () {
    return editor.windowManager.open({
      title: 'Wideo z YouTube',
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'title',
            label: 'Kod z linku YT'
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onSubmit: function (api) {
        var data = api.getData();
        /* Insert content when the window form is submitted */
        editor.insertContent('[[$yt? &link=`' + data.title + '`]]');
        api.close();
      }
    });
  };
  /* Add a button that opens a window */
  editor.ui.registry.addButton('ytlink', {
    text: 'Wideo z YT',
    icon: 'embed',
    onAction: function () {
      /* Open window */
      openDialog();
    }
  });
});