accessing api from a tinymce plugin


I’m trying to create a tinymce plugin that generates a shortcode containing two image ids:

[image-fade old="xx" new="yy"]

I would like to let users select images directly from the media selector frame, but haven’t figured out how to do this. I am able to allow the users to enter the ID in an alert box, but can’t do better than that. This is what I have so far:

( function() {
    var open_media_window = function () {
        var first={};

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

    tinymce.create( 'tinymce.plugins.hhImage', {
    init: function( ed, url ) {
        ed.addButton( 'hh_image', {
        title: 'Insert Historical Image Overlay',
        image: '',
        onclick: function() {       
            //old = prompt( "Enter id of old photo", "" );
            old = open_media_window();
            //newImage = prompt( "Enter id of new photo", "" );
            newImage = open_media_window();
            ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
    createControl: function( n, cm ) { return null; },
    tinymce.PluginManager.add( 'hh_image', tinymce.plugins.hhImage );

The media selector window will open, and I can select two images, but nothing gets logged to the javascript console and the shortcode produced is:

[image-fade old="undefined" new="undefined"]

What am I doing wrong here?
Thanks for the help!

, , , Matt 7 years 2016-02-29T14:24:37-05:00 0 Answers 92 views 0

Leave an answer