How to open media browser from tinyMCE window?

4 Views

I’m trying to create a shortcode to embed audio files, with custom data as copyright owners and year, etc. It’s a basic tinyMCE window with textboxes to insert the information, and the URL of audio files uploaded to the media library.

What I need is a way to create a button on this window; when clicked (onclick), open the media library, so I can find audio files and when insert it, populate the textbox “audio_url”.

Read More

My code by now (not working properly, see below): 

{ // this is only one option from a lisbox where my other shortcodes are...
    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 + '"]');
    }
});
} },

So it will show a textbox where the file URL must be, and a button to open the media library, where I can find a file and insert it – what will populate the field.

It’s not working because the tb_show iframe loads behind the tinymce window, and an empty window in front. How can I make it appear on top (focus), them browse the media gallery to get the file URL? Do tinymce has a better way to work on it (instead of tb_show)?
Thank you all.

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. I needed to do this for an image upload today, I couldn’t figure it out immediately either, I stumbled upon your question while looking and it set me off the right direction. Here’s how I got it working in the end.

    {
    type: 'textbox',
    name: 'image',
    label: 'Image',
    id: 'my-image-box',
    value: ''
},
{
    type: 'button',
    name: 'select-image',
    text: 'Select Image',
    onclick: function() {
        window.mb = window.mb || {};

        window.mb.frame = wp.media({
            frame: 'post',
            state: 'insert',
            library : {
                type : 'image'
            },
            multiple: false
        });

        window.mb.frame.on('insert', function() {
            var json = window.mb.frame.state().get('selection').first().toJSON();

            if (0 > $.trim(json.url.length)) {
                return;
            }

            $('#my-image-box').val(json.id);
        });

        window.mb.frame.open();
    }
}

    There’s probably a few things you need to change to get it working correctly with an audio browser, but the basics are there.

    Note that the json variable also contains json.url for the URL if that’s what you need, but here I’m using the attachment ID.

    You’ll need to change the library type also, I’m not sure what the audio library name is (probably ‘audio’) but here I’m using the image library.

    Hope this helps.