How to handle multiple instance of “send_to_editor” js function

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 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.

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

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0