Question

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

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

{ // 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 + '"]');
    }
});
} },

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

它没有工作，因为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变量还包含json.url，但此处我正在使用附件ID。

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

希望这有帮助。

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

1 个答案: