Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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;
}
share|improve this question

4 Answers 4

up vote 7 down vote accepted

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;
}
share|improve this answer
    
had to change the first line to var original_send_to_editor = window.send_to_editor;. Thanks anywayz! Didn't knew if i can store a js function! :) –  Sisir Feb 18 '13 at 20:56

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.

share|improve this answer

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;
});
share|improve this answer
    
It partly works. After you click the button you have to save (refresh the page). If you go to editor without refreshing the page the insert media button won't work because the send_to_editor function is changed. –  Sisir Feb 18 '13 at 20:50

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; 
    }); 
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.