将媒体上载添加到自定义选项面板中断“Insert to Post”

时间：2014-03-04 作者：frankV

我已经在我的主题中创建了一个自定义站点选项页面作为顶级管理页面。这些选项非常基本，但包括一些图像。

我最初在选项页面上找到了很多使用Media Uploader上载或选择图像的示例。它很容易实现，工作起来很有魅力，但却产生了严重的不良后果。

尽管我可以调用media uploader模式并将图像添加回我的自定义选项页面，但“插入到帖子”打破了WP的所有其他方面。当我单击“插入帖子”时，所有帖子、自定义帖子和页面都无法再从媒体上传程序返回任何字符串。

我认为这一定与window.send_to_editor 函数，下面是我用来调用媒体上传器的javascript（我在许多网站上都找到了）：

jQuery(document).ready(function($) {

$(\'#upload_header_img_button\').click(function() {
    formfield = $(\'#header_image\');
    tb_show(\'\', \'media-upload.php?type=image&TB_iframe=true\');
    return false;
});

$(\'#upload_branding_img_button\').click(function() {
    formfield = $(\'#branding_image\');
    tb_show(\'\', \'media-upload.php?type=image&TB_iframe=true\');
    return false;
});

window.send_to_editor = function(html) {
    imgurl = $(html).attr(\'href\');
    $(formfield).val(imgurl);
    tb_remove();
    var img_preview = $(formfield).parent().find(\'img\');
    console.log(img_preview);
    img_preview.attr(\'src\',imgurl);
}
});
经过大量挖掘（阅读：评论搜索）I found this function 一位读者提供了一个可能的解决方案：https://dpaste.de/T8ji 在我的window.send_to_editor 作用它起到了作用，因为我的所有帖子和页面都恢复了“插入帖子”功能，但现在媒体上传器在我的自定义选项页面上坏了。

有人碰到过这个吗？

1 个回复
SO网友:Alain Jacomet Forte

我刚碰到这个。原因是您正在覆盖window.send_to_editor 与您自己的功能之一。WordPress使用此功能插入图库和其他内容，所以现在您已经更改了它，它无法插入。

理想情况下，“您希望使用由媒体上载程序触发的事件，而不是仅仅替换函数，或者至少在备份时临时替换它，类似这样的情况（wp admin使用下划线.js）：

myBtn.on(\'click\', function() { 
    var bkSend = _.clone(window.send_to_editor); // we need a copy 
    
    //... My code

    window.send_to_editor = function(html) { 
        //... My custom things

        restore();
    } 
    
    function restore() { 
         window.send_to_editor = bkSend;
    }
});
未经测试。

Ok so a tested and working version for my case:

    (function($) {
        $(document).ready(function() {
            $(\'#upload_image_button\').on(\'click\', function(e)  {

                e.preventDefault();
                e.stopPropagation();

                tb_show(\'\', \'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true\');
                
                var bkSend = _.clone(window.send_to_editor);

                var restore = function(callBack) { 

                    window.send_to_editor = _.clone(bkSend);

                    callBack();
                };

                //console.log(bkSend);

                window.send_to_editor = function(html) {

            
                    imgurl = $(html).find(\'img\').attr(\'src\');
                        
                    $(\'#lc-slider-image\')[0].src = imgurl;
                    $(\'#lc_slider_image\').val(imgurl);

                    restore(tb_remove);    

                };

                //console.log(window.send_to_editor);
            });
        });
    })(jQuery);
我希望这能帮助那些引发这一切疯狂的可怕博客帖子的受害者。

我太忙了，没有时间美化代码，它肯定会更好，所以如果有人能帮我，那就太好了。

结束
标签： uploads   admin-menu   media-modal   小码农  

相关推荐

Protect Uploads in Multisite

我正在使用WordPress multisite（3.3.1），并试图保护从某些博客上传的内容不被热链接和直接访问。这与How to Protect Uploads, if User is not Logged In?, 但我只想通过服务器上运行的脚本访问上传内容（即，只有服务器可以显示/提供上传服务），因此内容可以受到WordPress用户权限的保护。例如，我有一个名为40c的字段。jpg位于localhost/files/2011/07/40c。jpg；我想让文件显示出来only 在本地域上由HTML