Окно Jquery.send_to_editor

ProgramBox

Окно Jquery.send_to_editor

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#jquery #wordpress

Вопрос:

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

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

Отлично работает, если у вас есть только 1 поле для загрузки. Как только вы добавите больше загрузок, каждое поле загрузки будет сохранено с тем же путем к изображению. Просто нужно, чтобы каждая кнопка загрузки вставляла только значение для связанного с ней текстового поля.

Я пытался использовать .каждый, но не смог заставить его работать правильно. Также пробовал использовать .attr (‘id’) для вставки значения, но там ничего не делается.

Вот мой jQuery и разметка:

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

Как всегда, мы высоко ценим любую помощь.

Ответ №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=imageamp;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();
};

1. ВАУ, поговорим о нише. Об этом очень сложно найти информацию! Отличная работа, спасибо за публикацию: D

2. возможно, захочется использовать prevAll вместо prev . кроме того, при отправке «Вставить из URL» jquery испытывает трудности с поиском объекта ‘img’. таким образом, вы можете обернуть результат html перед использованием jQuery, вот так, html = "<a>" html "</a>" .

3. хороший материал. Для загрузки аудиофайлов я использовал 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:

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

 <?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=imageamp;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..."/>

1. Отличный материал. Пока мне нравится этот скрипт. Только одна вещь… $("#" 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=imageamp;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:

Этот пример восстанавливает функцию 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=imageamp;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;
});

Ответ №5:

Вот мое исполнение:

Это также позволяет вам вставлять файлы PDF или что-либо еще без атрибута SRC, проверяя наличие src в img и, если его нет, используя href в документе. Это также позволяет вам использовать классы и применять это к нескольким элементам.

Javascript:

     var formfield = "";
    jQuery('.browse_upload').click(function() {
            formfield = jQuery(this).attr('name');
            tb_show('', 'media-upload.php?type=imageamp;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:

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

 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=imageamp;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..."/>

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

1. Спасибо. Но исходная функция send_to_editor не будет восстановлена, если пользователь закроет загрузчик мультимедиа.

2. Что ж, я нашел решение: просто нужно привязать событие ‘tb_unload’, чтобы всегда быть уверенным в восстановлении исходной функции send_to_editor

3. @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=fileamp;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>

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

Позже с помощью php я проверяю, есть ли правильные расширения в соответствующих полях загрузки, и сохраняю их в пользовательских полях, если нет, то оставляю поля пустыми.

Возможно, кому-то это покажется полезным, поскольку я нашел ваши ответы полезными для себя.

Ответ №8:

Вот мое решение. Это позволит вам загружать любые изображения в формате doc, 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
    };
}

Ответ №9:

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

 jQuery(document).ready(function($) {
    $('#upload_button').click(function() {
        tb_show('Upload a Podcast MP3 file', 'media-upload.php?referer=my-settingsamp;type=audioamp;TB_iframe=trueamp;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();
    }
});