jquery - 在 WordPress 媒体选择器中获取多个图像

Question

我有以下 jQuery，它将打开 wordpress 媒体选择器并返回所选媒体文件的 url。

我已将 multiple 设置为 true，这样我就可以选择多个图像。

我的问题是如何获取第二张图片的网址。我似乎只能得到第一个。

额外问题 - 有没有办法将多重选择限制为仅 2 个图像？

jQuery(function($) {
        $(document).ready(function(){
                $('#insert-my-media').click(open_media_window);
            });

            function open_media_window() {
                if (this.window === undefined) {
                    this.window = wp.media({
                            title: 'Select a Before and After image',
                            library: {type: 'image'},
                            multiple: true,
                            button: {text: 'Insert'}
                        });

                    var self = this; // Needed to retrieve our variable in the anonymous function below
                    this.window.on('select', function() {
                            var first = self.window.state().get('selection').first().toJSON();
                            wp.media.editor.insert('[banda before="' + first.url + ' after="' + second.url + '"]');
                        });
                }

                this.window.open();
                return false;
            }
    });

Answer 1

最好的方法是创建媒体编辑器的 2 个实例，并使用“multiple: false”。

注意 $(document).ready 是无用的，因为通过使用语法 jQuery(my_function)，my_function 在文档就绪时执行。

您可能需要这样的东西:

jQuery(function ($) {
    var mediaPopup;
    var placeholders = {
        before: "@BandaBefore@",
        after: "@BandaAfter@"
    };
    var attrs = {
        before: "before=",
        after: "after="
    };
    var editorText = "[banda before='" + placeholders.before +
         "' after='" + placeholders.after + "']";
    $("#choseBeforeMedia").on("click", function () {
        openMediaPopup("before");
    });
    $("#choseAfterMedia").on("click", function () {
        openMediaPopup("after");
    });

    var currentValues = {
        before: function () {
            var idx1 = editorText.indexOf(attrs.before) + attrs.before.length + 1;
            var idx2 = editorText.indexOf(attrs.after) - 2;
            return editorText.substring(idx1, idx2);
        },
        after: function () {
            var idx1 = editorText.indexOf(attrs.after) + attrs.after.length + 1;
            var tmp = editorText.substring(idx1);
            var idx2 = tmp.indexOf("'");
            return tmp.substring(0, idx2);
        }
    };

    function openMediaPopup(label) {
        if (mediaPopup === undefined) {
            mediaPopup = wp.media({
                title: "Select the " + label + " image",
                library: {type: "image"},
                multiple: true,
                button: {text: "Insert"}
            });

            mediaPopup.on("select", function () {
                var img = self.window.state().get("selection").toJSON();
                if (editorText.indexOf(placeholders[label]) > -1) {
                    editorText = editorText.replace(placeholders[label], img.url);
                }
                else {
                    editorText = editorText.replace(currentValues[label](), img.url);
                }
                wp.media.editor.insert(editorText);
           });
       }

       mediaPopup.open();

    }
});