Jquery window.send_to_editor

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

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

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

然后在元框中使用表单的输入字段，如下所示…

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

 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('') window.send_to_editor = orig_send_to_editor; } return false; }); }); 

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

以下是HTML作为示例：

  ID,'item_image',true); ?>  
":'')?> 

此示例通过将tb_unload事件绑定为上面提到的soju来恢复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; }); 

这是我的演绎：

它还允许您通过检查img src来插入PDF文件或没有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

  Browse 

这肯定是一个难以解决的问题，没有很好的文档记录，但我认为使用自定义post类型和所有… …我已经改进了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; } 

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

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

并像以前一样打电话给它：

希望有人发现它有用！

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

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

上传的字段就是这样的

    Upload Thumbnail
   
 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).     Upload Video
   
 You can also upload video to stream directly from your website, using WordPress media manager(supported files are: .mp4, .MP4, .flv, .FLV, .f4v, .F4V).   

这样我就可以上传带有缩略图字段的图像，带有video字段的video，也可以在后期编辑屏幕上添加各种图像或图库。

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

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

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

我用这个来上传音频：

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