jQuery window.send_to_editor答案

【问题标题】：Jquery window.send_to_editorjQuery window.send_to_editor
【发布时间】：2011-08-06 00:08:33
【问题描述】：

想不出一个好的标题。

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

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

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

这是我的 jQuery 和标记：

jQuery('.upload-button').click(function() {
    formfield = jQuery('.upload').attr('name');
    tb_show('', 'media-upload.php?type=image&amp;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>

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

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

【问题讨论】：

看看这个comment

标签： jquery wordpress

【解决方案1】：

只需要能够指定值插入的输入字段即可。

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

【讨论】：

哇，谈谈利基市场。这方面的信息超级难找！干得好，感谢发帖：D
可能想要使用prevAll 而不是prev。此外，在提交“从 URL 插入”时，jquery 很难找到“img”实体。所以你可以在使用 jQuery 之前包装 html 结果，就像这样，html = "<a>" + html + "</a>".
好东西。对于音频文件上传，我使用了window.send_to_editor = function(html) { console.log(html); var file_url = $('a',html).attr('href'); $('#sc_podcast_file').val(file_url); tb_remove(); }

【解决方案2】：

我使用它来确保其他功能也适用于编辑器，并且我还传递了我想要图像的输入字段的 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");
?>

然后像这样在元框中使用表单的输入字段...

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

【讨论】：

好东西。到目前为止喜欢这个脚本。只是一件事...$("#" + uploadID.name).val(imgurl); 应该是 $("#" + uploadID).val(imgurl); 以防止未定义的问题，无论如何在我的设置中。

【解决方案3】：

这些解决方案的问题是您将无法将图像插入帖子中，因为这样做的功能已被覆盖。这是对上述代码的修改，允许图像仍然通过编辑器插入到帖子内容中。

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

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

以下是以 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>

【讨论】：

【解决方案4】：

本例通过绑定 tb_unload 事件来恢复 window.send_to_editor() 函数，如上面提到的 soju。

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

【讨论】：

帮助了我。需要有window.send_to_editor = orig_send_to_editor;添加回来。

【解决方案5】：

这是我的演绎：

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

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

    }

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

这确实是一个很难解决的问题，没有很好的文档记录，但我认为自定义帖子类型的使用正在增加......我对 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&amp;TB_iframe=true');
    return false;
}

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

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

并且几乎像以前一样调用它：

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

希望有人觉得它有用！

【讨论】：

谢谢。但是如果用户关闭媒体上传器，原始的 send_to_editor 功能将不会恢复。
好吧，我找到了一个解决方案：只需绑定 'tb_unload' 事件以确保始终恢复原始的 send_to_editor 功能
@soju 酷！，您是否有可以分享的代码？

【解决方案7】：

这可能是一个有点老的话题，但按照你的解决方案，我让我的插件工作了。上面的代码都没有完全适用于我的解决方案，但是将它们结合起来我让它工作了。我需要能够有 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&amp;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;
     });
 });

上传的字段是这样的

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

这样我可以上传带有缩略图字段的图像，以及带有视频字段的视频，并在帖子编辑屏幕中添加各种图像或画廊。

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

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

【讨论】：

【解决方案8】：

这是我的解决方案。这将允许您上传任何文档图像、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
    };
}

【讨论】：

你的代码中有这个：formfield = jQuery('.upload').attr('name');您似乎没有在任何地方再次使用变量表单域。那条线有必要吗？

【解决方案9】：

我用这个来上传音频：

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

【讨论】：