Jquery window.send_to_editor

问题:

Couldn't come up with a good title for this.

I've got a build in WordPress where I have multiple image uploads using the built in WordPress media uploader. How it's working is, after you upload and choose "insert", jQuery is inserting the image path into a text field, which contains the ID. Once you save, the text field is saved in the options table.

Works perfectly if you only have 1 upload field. Once you add more uploads, every upload field gets saved with the same image path. Just need each upload button to only insert the value for it's associated text field.

I've tried to use .each but couldn't get it working correctly. Also tried using .attr('id') to the value insert, but nothing doing there.

Here is my jQuery and the markup:

jQuery('.upload-button').click(function() {
    formfield = jQuery('.upload').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    imgurl = jQuery('img',html).attr('src');
    jQuery('.upload').val(imgurl);
    tb_remove();
};

<div class="upload_field"
    <input type="text" name="upload_one" id="upload_one" class="upload" value="" />
    <input type="button" class="upload-button" value="Upload Image" />
</div>

<div class="upload_field"
    <input type="text" name="upload_two" id="upload_two" class="upload" value="" />
    <input type="button" class="upload-button" value="Upload Image" />
</div>

<div class="upload_field"
    <input type="text" name="upload_three" id="upload_three" class="upload" value="" />
    <input type="button" class="upload-button" value="Upload Image" />
</div>

For further info, here is the uploader setup I'm using: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

Any help, as always, is greatly appreciated.

回答1:

Just need to be able to specify the input field that the value is inserted into.

var uploadID = ''; /*setup the var*/

jQuery('.upload-button').click(function() {
    uploadID = jQuery(this).prev('input'); /*grab the specific input*/
    formfield = jQuery('.upload').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    imgurl = jQuery('img',html).attr('src');
    uploadID.val(imgurl); /*assign the value to the input*/
    tb_remove();
};

回答2:

I use this to ensure other functionality works too for the editor and I also pass the id of the input field that I want the image in.

<?php
function customPostTypeUploader() {
    if(isset($_GET["post_type"])) {
?>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var uploadID          = '';
        var storeSendToEditor = '';
        var newSendToEditor   = '';

        jQuery(document).ready(function() {
            storeSendToEditor = window.send_to_editor;
            newSendToEditor   = function(html) {
                                    imgurl = jQuery('img',html).attr('src');
                                    $("#" + uploadID.name).val(imgurl);
                                    tb_remove();
                                    window.send_to_editor = storeSendToEditor;
                                };
        });

        function Uploader(id) {
            window.send_to_editor = newSendToEditor;
            uploadID = id;
            formfield = jQuery('.upload').attr('name');
            tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
            return false;
        }
    </script>
<?php
    }
}

add_action("admin_head", "customPostTypeUploader");
?>

Then use the input fields of a form in your meta box like this...

<input type="text" id="image_1" name="uploaded_image_1" value="" size="40" />
<input type="button" onclick="Uploader(image_1);" title="Upload image" class="upload-button" id="add_image" value="Browse..."/>

回答3:

The problem with these solutions is that you won't be able to insert images into posts as the function to do so has been overridden. Here is a modification to the above code that will allow images to still be inserted into the post content through the editor.

jQuery(document).ready(function() {

var orig_send_to_editor = window.send_to_editor;

jQuery('.upload_image_button').click(function() {
    formfield = jQuery(this).prev('input');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        window.send_to_editor = function(html) {
            var regex = /src="(.+?)"/;
            var rslt =html.match(regex);
            var imgurl = rslt[1];
            formfield.val(imgurl);
            tb_remove();
        jQuery('#show_'+formfield.attr('name')).html('<img src="'+imgurl+'" width="150" />')


            window.send_to_editor = orig_send_to_editor;
        }

        return false;
    });
});

The main difference is that this code saves the original function and reassigns it back to send_to_editor.

Here is the HTML to go with it as an example:

<input type="hidden" name="image_1" />
<?php $post_img = get_post_meta($post->ID,'item_image',true); ?>
<input class="upload_image_button" type="button" value="<?php echo (empty($post_img)?'Upload Image':'Change Image') ?>" />
<div id="show_image_1"><?php echo (!empty($post_img)?"<img src='$post_img' width='100' />":'')?></div>

回答4:

This example restores the window.send_to_editor() func by binding the tb_unload event as soju mentioned above.

var targetfield = '';
var orig_send_to_editor = window.send_to_editor;
jQuery('.fwb_uploadbtn').click(function() {
      targetfield = jQuery(this).prev('.fwb_uploadimg');
      tb_show('', 'media-upload.php?type=image&TB_iframe=true');

      //restore send_to_editor() when tb closed
      jQuery("#TB_window").bind('tb_unload', function () {
        window.send_to_editor = orig_send_to_editor;
      });

      //temporarily redefine send_to_editor()
      window.send_to_editor = function(html) {
        imgurl = jQuery('img',html).attr('src');
        jQuery(targetfield).val(imgurl);
        tb_remove();
      }
      return false;
});

回答5:

Here is my rendition:

It also allows you to insert PDF's files or anything without a SRC attribute by doing a check for img src and if none, trying href on the document. This one also allows you to use classes and apply this to multiple items.

The Javascript:

    var formfield = "";
    jQuery('.browse_upload').click(function() {
            formfield = jQuery(this).attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');

            return false;
    });
    window.send_to_editor = function(html) {
            hrefurl = jQuery('img',html).attr('src');
            if(jQuery(hrefurl).length == 0) {
                hrefurl = jQuery(html).attr('href'); // We do this to get Links like PDF's
            }
            jQuery('.' + formfield).val(hrefurl);
            tb_remove();

    }

Sample HTML

<input id="option[unique-option]" class="regular-text unique-option" type="text" name="option[unique-option]" value="<?php esc_attr_e( $options['unique-option'] ); ?>" />
<button class="browse_upload button-secondary" name="unique-option" type="button">Browse</button>

回答6:

It sure is a hard issue to solve, not very well documented, but I think use is increasing with custom post types and all... I've imho improved somewhat on Paul Gillespie's code.

var up = null;
jQuery(document).ready(function() {
    up = new Uploader();
});
function Uploader() {
    this.storeSendToEditor = window.send_to_editor;
    this.uploadID = null;
    this.imgID = null;
}
Uploader.prototype.newSendToEditor = function(html) {
    imgurl = jQuery('img',html).attr('src');
    jQuery("#" + this.up.uploadID).val(imgurl);
    if(typeof(this.up.uploadFunc) == "function")
    this.up.uploadFunc(html, imgurl, this.up.uploadID);
    tb_remove();
    this.up.uploadID = '';
    window.send_to_editor = this.up.storeSendToEditor;
};
Uploader.prototype.upload = function(id,func){
    window.send_to_editor = this.newSendToEditor;
    this.uploadID = id;
    this.uploadFunc = func;
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
}

Then use it by defining the custom function if you want to do more than just updating the input field for the database. I for one want to display the images within a wrapper div before uploading it.

var uploadFunc = function(html, imgurl, uploadID){
    // Do whatever you want.
};

And call it almost as before:

<input type="text" id="image_1" name="uploaded_image_1" value="" size="40" />
<input type="button" onclick="up.upload("image_1",uploadFunc);" title="Upload image" class="upload-button" id="add_image" value="Browse..."/>

Hope someone finds it useful!

回答7:

This is maybe a little bit old topic but following your solutions i made my plugin work. None of the code above didn't worked completely to my solution, but combining them i made it work. I needed to be able to have 2 upload fields and one to accept video files and other images, and to be able also to post images and videos in post edit screen.

jQuery(document).ready(function() {

var orig_send_to_editor = window.send_to_editor;

 jQuery('.upload_image_button').click(function() {
     formfield = jQuery(this).prev('input');
         tb_show('Add Media', 'media-upload.php?type=file&TB_iframe=true');

         window.send_to_editor = function(html) {
             imgurl = jQuery('img',html).attr('src');
             if(jQuery(imgurl).length == 0) {
                 imgurl = jQuery(html).attr('href'); // We do this to get Links like PDF's
             }
             formfield.val(imgurl);
             tb_remove();
                    jQuery('#'+formfield.attr('name')).val(imgurl);


             window.send_to_editor = orig_send_to_editor;
         }

         return false;
     });
 });

And fields for upload are like this

    <tr>
    <td>
        <label for="image_1">Upload Thumbnail</label><br>
        <input type="text" name="image_1" id="image_1" value="" size="60" />
        <input class="upload_image_button button" type="button" value="Upload Thumbnail" />
        <br>
        You can also upload thumb from your PC using WordPress media manager(supported files are: .bmp, .BMP, .jpg, .JPG, .png, .PNG, jpeg, JPEG, .gif, .GIF).
    </td>
</tr>
<tr>
    <td>
        <label for="video_1">Upload Video</label><br>
        <input type="text" name="video_1" id="video_1" value="" size="60" />
        <input class="upload_image_button button" type="button" value="Upload Video" />
        <br>
        You can also upload video to stream directly from your website, using WordPress media manager(supported files are: .mp4, .MP4, .flv, .FLV, .f4v, .F4V).
    </td>
</tr>

This way i can upload image with thumbnail field, and video with video field, and add various images or gallery in post edit screen also.

Later with php i check if proper extensions are in proper upload fields and save them in custom fields, if not it leave the fields empty.

Maybe some will find this useful as i found your answers useful and helpful to me.

回答8:

Here is my solution. This will allow you to upload any doc images, PDF's etc & will sort out the conflict issues that one will get with the text editors

var uploadID = ''; // setup the var in a global scope
var original_send_to_editor = window.send_to_editor;

jQuery('.upload-button').click(function() {
    uploadID = jQuery(this).prev('input'); // set the uploadID variable to the value of the input before the upload button
    formfield = jQuery('.upload').attr('name');
    tb_show('', 'media-upload.php?TB_iframe=true');
    uploadBAR(); // Call if needed
    return false;
});

function uploadBAR() {
    window.send_to_editor = function(html) {
    imgurl = jQuery(html).attr('href');
    uploadID.val(imgurl); /*assign the value of the image src to the input*/
    tb_remove();

    window.send_to_editor = original_send_to_editor;//restore old send to editor function
    };
}

回答9:

I used this for uploading audio:

jQuery(document).ready(function($) {
    $('#upload_button').click(function() {
        tb_show('Upload a Podcast MP3 file', 'media-upload.php?referer=my-settings&type=audio&TB_iframe=true&post_id=0', false);
        return false;
    });
    window.send_to_editor = function(html) {
        console.log(html);
        var file_url = $($.parseHTML(html)).attr('href');
        console.log(file_url);
        $('#my_input_field').val(file_url);
        tb_remove();
    }
});