Jquery window.send_to_editor

Jquery window.send_to_editor

提问by Ryan Palmer

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.

我在 WordPress 中构建了一个版本，我使用内置的 WordPress 媒体上传器上传了多个图像。它的工作原理是，在您上传并选择“插入”后，jQuery 会将图像路径插入包含 ID 的文本字段中。保存后，文本字段将保存在选项表中。

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.

如果您只有 1 个上传字段，则可以完美运行。添加更多上传后，每个上传字段都会以相同的图像路径保存。只需要每个上传按钮只插入其关联文本字段的值。

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.

我尝试使用 .each 但无法正常工作。还尝试使用 .attr('id') 插入值，但没有做任何事情。

Here is my jQuery and the markup:

这是我的 jQuery 和标记：

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/

有关更多信息，这是我正在使用的上传器设置：http: //www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

Any help, as always, is greatly appreciated.

一如既往，非常感谢任何帮助。

回答by cnix

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

回答by Paul Gillespie

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.

我使用它来确保其他功能也适用于编辑器，并且我还传递了我想要图像的输入字段的 id。

<?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..."/>

回答by JB McKee Bowers

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.

主要区别在于这段代码保存了原始函数并将其重新分配回 send_to_editor。

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

以下是与它一起使用的 HTML 作为示例：

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

回答by markharp1

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

这个例子通过绑定上面提到的 tb_unload 事件来恢复 window.send_to_editor() 函数。

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

回答by geilt

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.

它还允许您通过检查 img src 来插入 PDF 文件或任何没有 SRC 属性的文件，如果没有，则在文档上尝试 href。这个还允许您使用类并将其应用于多个项目。

The Javascript:

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

示例 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>

回答by Stefan Wallin

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.

这确实是一个难以解决的问题，没有很好的文档记录，但我认为自定义帖子类型的使用正在增加等等......我已经在 Paul Gillespie 的代码上有所改进。

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.

如果您想做的不仅仅是更新数据库的输入字段，那么通过定义自定义函数来使用它。我想在上传之前在包装器 div 中显示图像。

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!

希望有人觉得它有用！

回答by themissionmars

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

这是我的解决方案。这将允许您上传任何文档图像、PDF 等，并将解决文本编辑器遇到的冲突问题

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

回答by Aleksandar ?or?evi?

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.

这可能是一个有点老的话题，但是按照您的解决方案，我使我的插件工作了。上面的代码都没有完全适用于我的解决方案，但是将它们结合起来我使它起作用。我需要能够有 2 个上传字段和一个接受视频文件和其他图像，并且还能够在后期编辑屏幕中发布图像和视频。

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.

稍后使用 php 我检查正确的扩展名是否在正确的上传字段中，并将它们保存在自定义字段中，如果没有，则将字段留空。

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

也许有些人会发现这很有用，因为我发现您的答案对我有用和有帮助。

回答by squarecandy

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