当前位置： 文江博客话题详情

Jquery window.send_to_editor

发布于 2024-11-01 10:16:23 字数 1565 浏览 2 评论 0原文

无法为此想出一个好的标题。

我在 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&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 /

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

原文

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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

哎呦我呸! 2024-11-08 10:16:23

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

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

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();
};
回复 原文
两人的回忆 2024-11-08 10:16:23

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

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&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..."/>
回复 原文
你如我软肋 2024-11-08 10:16:23

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

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

主要区别在于，此代码保存了原始函数并将其重新分配回 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>

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>
回复 原文
玩物 2024-11-08 10:16:23

此示例通过绑定 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;
});

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;
});
回复 原文
梦情居士 2024-11-08 10:16:23

这是我的演绎：

它还允许您通过检查 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

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

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>
回复 原文
﹂绝世的画 2024-11-08 10:16:23

这确实是一个很难解决的问题，没有很好的记录，但我认为自定义帖子类型和所有内容的使用正在增加……恕我直言，我对 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.
};

几乎像以前一样称呼它：

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

希望有人发现它有用！

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!

回复 原文
雪花飘飘的天空 2024-11-08 10:16:23

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

上传字段是这样的

    <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 检查正确的扩展名是否在正确的上传字段中，并将它们保存在自定义字段中，如果没有，则将字段留空。

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

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.

回复 原文
淡写薰衣草的香 2024-11-08 10:16:23

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

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
    };
}
回复 原文
我不咬妳我踢妳 2024-11-08 10:16:23

我用它来上传音频：

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

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();
    }
});
回复 原文
~没有更多了~

关于作者

笑红尘

暂无简介

0 文章
0 评论
732 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

金兰素衣

文章 0 评论 0

ゃ人海孤独症

文章 0 评论 0

没有感情的刽子手

文章 0 评论 0

一枫情书

文章 0 评论 0

清晰传感

文章 0 评论 0

mb_XvqQsWhl

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文