如何从 tinyMCE 窗口打开媒体浏览器？答案

【问题标题】：How to open media browser from tinyMCE window?如何从 tinyMCE 窗口打开媒体浏览器？
【发布时间】：2014-12-27 22:27:52
【问题描述】：

我需要一种在此窗口上创建按钮的方法;单击（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）？谢谢大家。

【问题讨论】：

标签： wordpress tinymce shortcode thickbox

【解决方案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。

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

希望这会有所帮助。

【讨论】：