如何从微小的MCE窗口打开媒体浏览器

Question

我正在尝试创建一个短代码来嵌入音频文件，并将自定义数据作为版权所有者和年份等。这是一个基本的微小MCE窗口，带有用于插入信息的文本框，以及上传到媒体库的音频文件的URL。

我需要的是一种在此窗口上创建按钮的方法;单击（onclick）时，打开媒体库，以便我可以找到音频文件，并在插入时填充文本框"audio_url"。

我的代码现在（无法正常工作，见下文）：

{ // this is only one option from a lisbox where my other shortcodes are...
    text: 'Audio Shortcode',
    onclick: function() {
        var win = editor.windowManager.open( {
            title: 'Insert Audio',
            body: [
            {type: 'textbox',
            name: 'audio_url',
            id: 'audio-url',
            label: 'File...',
            value: '',
            },
            {type: 'button',
            name: 'find',
            text: 'Find...',
            onclick: function() {
                var audiofield = win.find('#audio-url');
                var myurl = tb_show("Audio search", "media-upload.php?type=audio&height=700&width=600&TB_iframe=true");
                editor.windowManager.open({
                    url: myurl,
                    width: 700,
                    height: 600,
                    resizable: 'yes',
                    close_previous: 'no',
                    oninsert: function ( url ) {
                        audiofield.value = url;
                    }
                }
        )},
    },              
],
onsubmit: function( e ) {
    editor.insertContent( '[audiomb src="' + e.data.audio_url + '"]');
    }
});
} },

因此，它将显示一个文本框，其中必须包含文件 URL，以及一个用于打开媒体库的按钮，我可以在其中找到文件并插入它 - 这将填充该字段。

它不起作用，因为tb_show iframe 加载在 tinymce 窗口后面，前面有一个空窗口。如何让它显示在顶部（焦点），他们浏览媒体库以获取文件 URL？tinymce是否有更好的方法来处理它（而不是tb_show）？谢谢大家。

Answer 1

我今天需要为图像上传执行此操作，我也无法立即弄清楚，我在查找时偶然发现了您的问题，这使我偏离了正确的方向。这是我最终让它工作的方式。

{
    type: 'textbox',
    name: 'image',
    label: 'Image',
    id: 'my-image-box',
    value: ''
},
{
    type: 'button',
    name: 'select-image',
    text: 'Select Image',
    onclick: function() {
        window.mb = window.mb || {};
        window.mb.frame = wp.media({
            frame: 'post',
            state: 'insert',
            library : {
                type : 'image'
            },
            multiple: false
        });
        window.mb.frame.on('insert', function() {
            var json = window.mb.frame.state().get('selection').first().toJSON();
            if (0 > $.trim(json.url.length)) {
                return;
            }
            $('#my-image-box').val(json.id);
        });
        window.mb.frame.open();
    }
}

您可能需要更改一些内容才能使其在音频浏览器中正常工作，但基础知识就在那里。

请注意，如果需要，json变量还包含 URL 的json.url，但这里我使用的是附件 ID。

您还需要更改库类型，我不确定音频库名称是什么（可能是"音频"），但在这里我使用的是图像库。

希望这有帮助。