Acessando wp.media api de um plugin de tinymce

Estou tentando criar um plugin tinymce que gera um shortcode contendo dois ids de imagem:

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

Gostaria de permitir que os usuários selecionassem imagens diretamente do quadro do seletor de mídia, mas não descobriram como fazer isso. Posso permitir que os usuários digitem a ID em uma checkbox de alerta, mas não podem fazer melhor que isso. Isto é o que eu tenho até agora:

 ( function() { var open_media_window = function () { var first={}; var window = wp.media({ 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); return first.id; }); window.open(); return first.id; }; tinymce.create( 'tinymce.plugins.hhImage', { init: function( ed, url ) { ed.addButton( 'hh_image', { title: 'Insert Historical Image Overlay', image: 'http://matttest.hackinghistory.ca/wp-content/plugins/custom-content-type-manager/js/plugins/../../images/wrench.png', 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 ); })(); 

A janela do seletor de mídia será aberta, e eu posso selecionar duas imagens, mas nada é registrado no console do javascript e o código curto produzido é:

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

O que estou fazendo de errado aqui? Obrigado pela ajuda! Matt

Solutions Collecting From Web of "Acessando wp.media api de um plugin de tinymce"

Eu tenho uma solução de trabalho que usa Promises, mas é feia e eu certamente apreciarei dicas. Não consegui descobrir como inventar uma subclass de promises, portanto, o código é repetitivo e ineficiente, e também instancia o quadro wp.media duas vezes. Além disso, não há nenhuma diretiva de “rejeição” na Promessa, então, se a Promessa não resolver, ela ficará pendurada no espaço vazio para sempre.

Não vou aceitar essa resposta, pois sinto que é um código tão ruim que tenho certeza de que alguém pode encontrar algo melhor!

  /** * TinyMCE buttons for custom shortcodes */ ( function() { var open_media_window = function () { var first={}; var window = wp.media({ 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); return first.id; }); window.open(); return first.id; }; tinymce.create( 'tinymce.plugins.hhImage', { init: function( ed, url ) { ed.addButton( 'hh_image', { title: 'Insert Historical Image Overlay', image: url + '/hist-image.png', onclick: function() { //old = prompt( "Enter id of old photo", "" ); var promise = new Promise(function(resolve,reject) { var window = wp.media({ title: 'Choose HISTORICAL image', library: {type: 'image'}, multiple: false, button: {text: 'Use as HISTORICAL image'} }); window.on('select', function(){ var files = window.state().get('selection').toArray(); first = files[0].toJSON(); console.log ("first is: " + first); resolve(first.id); }); window.open(); }); promise.then(function(data) { var old = data; var promise2 = new Promise(function (resolve,reject) { var window = wp.media({ title: 'Choose CONTEMPORARY image', library: {type: 'image'}, multiple: false, button: {text: 'Use as CONTEMPORARY image'} }); window.on('select', function(){ var files = window.state().get('selection').toArray(); first = files[0].toJSON(); console.log ("first is: " + first); resolve(first.id); }); window.open(); }); promise2.then(function(data2) { var newImage = data2; ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' ); }); }); // open_media_window(); // old = promise.done(); //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 ); })();