Question

Here is what I am doing:

I Added wordpress media upload with iframe popup when a button or link clicked. And with click of insert into post the image url placed on a textbox.

send_to_editor() function handles image insertion to editor

window.send_to_editor = function(html) {
     var imgurl = jQuery('img',html).attr('src');
     current_item.siblings('.upload_image').val(imgurl);
     current_item.parent().prepend('<div><img width="300" src="'+imgurl+'" alt="banner image" /></div>');
     tb_remove();
    }

So, you see the default send_to_editor is edited and changed. Now when i try to upload the image from wordpress editor image uploaded and click insert image to post. It doesn't work.

Question: How do i multiple instance of send_to_editor() or parhaps creating and hook new js function to each instant of image uploader so they don't conflict?

Solution:

var original_send_to_editor = window.send_to_editor;

window.send_to_editor = function(html) {
     var imgurl = jQuery('img',html).attr('src');
     current_item.siblings('.upload_image').val(imgurl);
     //current_item.siblings('#logo').remove();
     current_item.siblings('.image-preview').html('<img src="'+imgurl+'" >');    
     tb_remove();
     window.send_to_editor = original_send_to_editor;
}
Was it helpful?

Solution

only overwrite the send_to_editor function when your link or button is click but store the old function to restore it so try this on a click event:

//store old send to editor function
window.restore_send_to_editor = window.send_to_editor;
//overwrite send to editor function
window.send_to_editor = function(html) {
     var imgurl = jQuery('img',html).attr('src');
     current_item.siblings('.upload_image').val(imgurl);
     current_item.parent().prepend('<div><img width="300" src="'+imgurl+'" alt="banner image" /></div>');
     tb_remove();
     //restore old send to editor function
     window.send_to_editor = window.restore_send_to_editor;
}

OTHER TIPS

My approach was similer to @Bainternet's. The circumstances were slightly different however. Long story short, I had multiple buttons that opened the Add Media window and it was breaking the default TinyMCE functionality.

  1. Create an object that stores 2 items:

    var $state_manager = {
          active_item : 'null',
          default_send_to_editor: window.send_to_editor
    }
    
  2. Custom buttons will change the value of active_item when clicked:

     $('.button').click(function(){
        $state_manager.active_item = $(this).attr('data-unqiue-id');
        // open the window and do whatever else you need
     })
    
  3. Check the status of active_item and either do custom work or call the stored default function and set active_item to null once done.

    window.send_to_editor = function( html ) {
     if($state_manager.active_item === 'null') {
       //call the default
       $state_manager.default_send_to_editor( html );
     }else{
       //do some custom stuff here being sure to reset
       // active_item to 'null' once completed
       $state_manager.active_item = 'null';
     }
    }
    

A benefit of storing the active_item is to target different input fields and populating them with the url to the uploaded item.

I just put window.send_to_editor's function in .click() function

$('#upload_button_1').click(function() {
                            tb_show('','media-upload.php?type=image&amp;TB_iframe=true');

                            window.send_to_editor = function(html) {
                            imgurl = jQuery('img',html).attr('src');
                            // do some rock 
                            tb_remove();
                            }
                            return false;
});

I have create a plugin and it conflict with the Add media on Editor. So i change following :

$('#upload_button').click(function() { 
       tb_show('Upload a logo', 'media-upload.php?type=image&TB_iframe=true&post_id=0', false); 

         //store old send to editor function
        window.restore_send_to_editor = window.send_to_editor;
        // Display the Image link in TEXT Field
        window.send_to_editor = function(html) { 
            var image_url = $('img',html).attr('src'); 
            $('.logofield').val(image_url); 
            tb_remove(); 
            window.send_to_editor = window.restore_send_to_editor;
        } 

       return false; 
    }); 
Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top