How to handle multiple instance of “send_to_editor” js function

0 Views

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.

Read More

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;
}
Post Views: 0

Related posts

Leave a Reply

4 comments

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

  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.

  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&amp;TB_iframe=true');

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

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