How to open the Wordpress media library by tinymce?

Asked

Viewed 153 times

0

I’m trying to create a shortcode to embed audio files on the page, and I prefer not to use the standard 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 clicking the button, I need to open the media library, to search for or send audio files, which when inserted, will fill the text field with the URL of the file.

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 standard Wordpress thickbox, to fetch the file and when to insert (oninsert), fill the box with the URL.

It doesn’t work because the tb_show iframe clicks behind the tinymce window, and an empty window (the last.windowManager.open editor) in front of them all. How can I make the media library window load correctly by clicking the button, then insert the media and fill the box? Or does tinymce 4 have a better way of making this work? Thank you!

  • Oops, all right? Take a look at this: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/

  • I know the little button over there at Tinymce looks a lot better, but, boy, it’d be a lot less of a headache to do a Custom Meta Box. You can even insert something completely customized between the Title input box and the Content textarea.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.