How to handle multiple instance of "send_to_editor" js function

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;
}

Answer 1

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;
}

Answer 2

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.

Answer 3

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

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

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

Answer 4

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; 
    });