Jquery window.send_to_editor - PullRequest
       2

Jquery window.send_to_editor

10 голосов
/ 15 апреля 2011

Не могу придумать хороший заголовок для этого.

У меня есть сборка в WordPress, где у меня есть несколько загрузок изображений с использованием встроенного в WordPress медиа-загрузчика. Как это работает, после загрузки и выбора «вставить», jQuery вставляет путь к изображению в текстовое поле, содержащее идентификатор. После сохранения текстовое поле сохраняется в таблице параметров.

Отлично работает, если у вас есть только 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- тема /

Любая помощь, как всегда, очень ценится.

Ответы [ 9 ]

27 голосов
/ 15 апреля 2011

Просто нужно иметь возможность указать поле ввода, в которое вставляется значение.

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();
};
6 голосов
/ 06 декабря 2011

Я использую это для обеспечения работы других функций для редактора, а также передаю идентификатор поля ввода, в котором я хочу изображение.

<?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..."/>
4 голосов
/ 17 декабря 2012

В этом примере восстанавливается функция window.send_to_editor () путем привязки события tb_unload, как указано выше в 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;
});
4 голосов
/ 23 апреля 2012

Проблема с этими решениями заключается в том, что вы не сможете вставлять изображения в сообщения, поскольку функция для этого была переопределена. Вот модификация вышеприведенного кода, которая позволит изображениям по-прежнему вставляться в контент публикации через редактор.

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>
3 голосов
/ 27 марта 2012

Вот мое представление:

Он также позволяет вставлять файлы 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>
1 голос
/ 16 мая 2013

Вот мое решение.Это позволит вам загружать любые изображения документов, 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
    };
}
1 голос
/ 05 октября 2012

Возможно, это немного старая тема, но, следуя вашим решениям, я заставил свой плагин работать. Ни один из приведенных выше кодов не работал полностью для моего решения, но, комбинируя их, я заставил его работать. Мне нужно было иметь 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 я проверяю правильность расширений в правильных полях загрузки и сохраняю их в пользовательских полях, если нет, оставляю поля пустыми.

Может быть, некоторые найдут это полезным, так как я нашел ваши ответы полезными и полезными для меня.

1 голос
/ 12 марта 2012

Это, конечно, трудная проблема, не очень хорошо документированная, но я думаю, что использование увеличивается с пользовательскими типами постов и все ... Я немного улучшил код Пола Гиллеспи.

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

Надеюсь, кто-то найдет это полезным!

0 голосов
/ 08 апреля 2016

Я использовал это для загрузки аудио:

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();
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...