I'm trying to create a shortcode to embed audio files on the page, and I'd rather not use the default WordPress shortcode because I need other parameters.
I use a basic script to open a tinyMCE window, which contains a text box ("audio_url") and a button. When I click the button, I need to open the media library to search for or send audio files, which when inserted, will fill in the text field with the file's URL.
This is what I have (does not work as needed, see below):
{ // essa é só uma opção de shortcode numa listbox que guarda todas
text: 'Audio Shortcode',
onclick: function() {
var win = editor.windowManager.open( {
title: 'Insert Audio',
body: [
{type: 'textbox',
name: 'audio_url',
id: 'audio-url',
label: 'File...',
value: '',
},
{type: 'button',
name: 'find',
text: 'Find...',
onclick: function() {
var audiofield = win.find('#audio-url');
var myurl = tb_show("Audio search", "media-upload.php?type=audio&height=700&width=600&TB_iframe=true");
editor.windowManager.open({
url: myurl,
width: 700,
height: 600,
resizable: 'yes',
close_previous: 'no',
oninsert: function ( url ) {
audiofield.value = url;
}
}
)},
},
],
onsubmit: function( e ) {
editor.insertContent( '[audiomb src="' + e.data.audio_url + '"]');
}
});
} },
What I tried there was to create a tinyMCE window containing the default WordPress thickbox, to fetch the file and when to insert (oninsert), fill in the box with the URL.
It does not work because the tb_show iframe loads behind the tinymce window, and an empty window (the last editor.windowManager.open) in front of all of them. How can I make the media library window load correctly when I click the button, then insert the media and fill in the box? Or does tinyMCE 4 have a better way to make it work? Thanks!