add wordpress file picker in the visual editor

1 Views

I wonder how I can add a file picker (the default wordpress librairy would be perfect) into my tinymce visual editor’s popup.

at the moment I have a field where I have to past the url of the picture, if I could add a button to pick a picture from my library instead, it would be great !

Read More

What I try to achieve

Here is what I have so far 

editor.addButton('thumbnail', {
            title: 'Thumbnail',
            image: url+'/../images/icon-thumbnail.png',
            onclick: function() {
                // Open window
                editor.windowManager.open({
                    title: 'Thumbnail',
                    width: 940,
                    height: 150,
                    body: [
    //I have to change this line--------->  {type: 'textbox', name: 'url', label: 'Media URL'},<----- Is there an option to put a filepicker here ?
                        {type: 'textbox', name: 'caption', label: 'Caption'},
                        {type: 'checkbox', name: 'lightbox', value: '1', label: 'Lightbox'}
                    ],
                    onsubmit: function(e) {
                        if(e.data.url==''){
                            alert('you have to provide the media's URL');
                            e.stopPropagation();
                            e.preventDefault();
                        }else{
                            // Insert content when the window form is submitted
                            var shortCode = '[thumbnail url="'+e.data.url+'"';
                            if(e.data.caption != ''){
                                shortCode = shortCode+' caption="'+e.data.caption+'"';
                            }
                            if(e.data.lightbox){
                                shortCode = shortCode+' lightbox=true';
                            }
                            shortCode = shortCode+' ]';
                            editor.insertContent(shortCode);
                        }
                    }
                });
            }
        });
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can read this useful article, this also may help.

    I dont’t want to copy-paste the text from articles, but basically you have to create custom PHP function in your theme’s functions.php file which will handle media dialog display, and then include it with add_action() on event admin_print_scripts.

    The last part is usage of some JavaScript and the uploader inside, like this:

    jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});