accessing wp.media api from a tinymce plugin

According to my understanding the media selector works asynchronously. Your function open_media_window is going to open the media selector and return first.id (which is null by that time). The media onselect handler will be called when the user selects an image and clicks on “Insert” button.

What you have to do is to use a global variable within the scope of your plugin, and populate the image ids/urls there. Then call ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' ); inside the onselect handler but only when both images are populated in your global variable.

There you go!

(function () {
  var user_selected_images = {};

  var open_media_window = function (title, type, ed) {
    var first = {};

    var window = wp.media({
      title: title,
      library: {type: 'image'},
      multiple: false,
      button: {text: 'Insert'}
    });
    window.on('select', function () {
      var files = window.state().get('selection').toArray();
      first = files[0].toJSON();

      user_selected_images[type] = first.id;

      // If both images have been selected, add shortcode
      if (user_selected_images.old && user_selected_images.new) {
        ed.execCommand('mceInsertContent', false, '[image-fade old="' + user_selected_images.old + '" new="' + user_selected_images.new + '"]');
      }
    });

    window.open();
  };

  tinymce.create('tinymce.plugins.hhImage', {
    init: function (ed, url) {
      ed.addButton('hh_image', {
        title: 'Insert Historical Image Overlay',
        image: 'https://matttest.hackinghistory.ca/wp-content/plugins/custom-content-type-manager/js/plugins/../../images/wrench.png',
        onclick: function () {
          //Erase any old data
          user_selected_images = {};
          //Opens first
          open_media_window("Select new photo", "new", ed);
          //Opens second and in front of the first
          open_media_window("Select old photo", "old", ed);
        }
      });
    },
    createControl: function (n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('hh_image', tinymce.plugins.hhImage);
})();

Hi @adee147 — thanks so much, this is great! sorry it took me a while to say thanks. I had come up with my own convoluted solution here:

https://wordpress.stackexchange.com/questions/219321/accessing-wp-media-api-from-a-tinymce-plugin

But this is much tidier, thank you. I think I would add just one line, in the window.on(‘select’) callback function, that resets user_selected_images to {} after adding the shortcode — in case a user wants to insert two of thse overlays into a page.

Thank you!

You’re welcome! perhaps I should thank you too, because your post helped me a lot with one of my plugins. I was looking for a way to call the media uploader when I found this post. So thank you for asking this question ??

By the way, the hh_image button’s onclick handler does reset the user_selected_images to {}, which also caters the scenario where user would only select one image and close the second dialog. So clicking on the button again will reset the process.