TinyMCE彈出窗口添加媒體按鈕

Question

在我正在開發的Wordpress主題中，我有一個TinyMCEPopup來向編輯器添加短代碼，一些短代碼需要圖像。 我可以添加一個“添加媒體”按鈕，打開Wordpress媒體上傳器，即使我在TinyMCEPopup中，也允許用戶選擇或上傳圖像嗎？

Answer 1

不知道它是否會有所幫助，但我遇到了同樣的問題並解決了這個問題。

在functions.php添加

add_action( 'after_setup_theme', 'mytheme_theme_setup' );

if ( ! function_exists( 'mytheme_theme_setup' ) ) {
    function mytheme_theme_setup() {

        add_action( 'init', 'mytheme_buttons' );

    }
}

/********* TinyMCE Buttons ***********/
if ( ! function_exists( 'mytheme_buttons' ) ) {
    function mytheme_buttons() {
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
            return;
        }

        if ( get_user_option( 'rich_editing' ) !== 'true' ) {
            return;
        }

        add_filter( 'mce_external_plugins', 'mytheme_add_buttons' );
        add_filter( 'mce_buttons', 'mytheme_register_buttons' );
    }
}

if ( ! function_exists( 'mytheme_add_buttons' ) ) {
    function mytheme_add_buttons( $plugin_array ) {
        $plugin_array['mybutton'] = get_template_directory_uri().'/js/tinymce_buttons.js';
        return $plugin_array;
    }
}

if ( ! function_exists( 'mytheme_register_buttons' ) ) {
    function mytheme_register_buttons( $buttons ) {
        array_push( $buttons, 'mybutton' );
        return $buttons;
    }
}

這將初始化您需要的按鈕。 現在在tinymce_buttons.js你會添加類似的東西

(function() {
    tinymce.PluginManager.add('mybutton', function( editor, url ) {
        editor.addButton( 'mybutton', {
            text: 'My button for media upload',
            icon: false,
            onclick: function() {
                editor.windowManager.open( {
                    title: 'Insert Media',
                    body: [
                        {
                            type: 'textbox',
                            name: 'img',
                            label: 'Image',
                            value: '',
                            classes: 'my_input_image',
                        },
                        {
                            type: 'button',
                            name: 'my_upload_button',
                            label: '',
                            text: 'Upload image',
                            classes: 'my_upload_button',
                        },
                    ],
                    onsubmit: function( e ) {
                        editor.insertContent( '[shortcode-name img="' + e.data.img + '"]');
                    }
                });
            },
        });
    });

})();

jQuery(document).ready(function($){
    $(document).on('click', '.mce-my_upload_button', upload_image_tinymce);

    function upload_image_tinymce(e) {
        e.preventDefault();
        var $input_field = $('.mce-my_input_image');
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Image',
            button: {
                text: 'Add Image'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
        });
        custom_uploader.open();
    }
});

首先添加按鈕功能。 此處給出了彈出窗口中的選項列表。 它不是100％完整，但比廢話的官方文檔更好。

第一部分是按鈕初始化。 這為您提供了“我的媒體上傳按鈕”按鈕，點擊后您將獲得一個帶有輸入字段和按鈕的模態。

單擊按鈕，將打開媒體上載，您可以選擇圖像。 在選擇時，網址將位於輸入字段中，您將在短代碼中獲取該網址。

希望能幫助到你 ：）

Answer 2

還有另外一個問題（ 來自tinymce插件彈出窗口的Open / Access WP媒體庫 ），所以我在這里粘貼我的答案，因為這是類似的：

嗨 - 剛才我遇到了同樣的問題並找到了解決方案，所以我在這里分享。 我希望現在還為時不晚。

首先要能夠使用WP Add Media按鈕，您必須將所需的腳本排入隊列。 這很簡單，只需調用wp_enqueue_media（）函數：

add_action('admin_enqueue_scripts', 'enqueue_scripts_styles_admin');
function enqueue_scripts_styles_admin(){
    wp_enqueue_media();
}

此調用可確保您具有使用WP Media按鈕所需的庫。

當然，您還應該使用HTML元素來保存上​​傳/選定的媒體文件URL，如下所示：

<input type="text" class="selected_image" />
<input type="button" class="upload_image_button" value="Upload Image">

第一個文本字段將保存媒體文件的URL，而第二個文本字段是用於打開媒體彈出窗口本身的按鈕。

然后在你的jscript中，你會有這樣的事情：

    var custom_uploader;

    $('.upload_image_button').click(function(e) {
        e.preventDefault();

        var $upload_button = $(this);

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $upload_button.siblings('input[type="text"]').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });

現在我不打算解釋每一行，因為它並不難理解。 最重要的部分是使用wp對象使所有這些工作的部分。

棘手的部分是讓所有這些工作在TinyMCE彈出窗口（這是我遇到的問題）。 我已經搜索過你的解決方案，這對我有用。 但在此之前，我會先談談我遇到的問題。 當我第一次嘗試實現它時，我在彈出窗口本身遇到了“WP is undefined”問題。 要解決這個問題，您只需將WP對象傳遞給腳本，如下所示：

(function() {
tinymce.create('tinymce.plugins.someplugin', {
    init : function(ed, url) {
        // Register commands
        ed.addCommand('mcebutton', function() {
            ed.windowManager.open(
                {
                    file : url + '/editor_button.php', // file that contains HTML for our modal window
                    width : 800 + parseInt(ed.getLang('button.delta_width', 0)), // size of our window
                    height : 600 + parseInt(ed.getLang('button.delta_height', 0)), // size of our window
                    inline : 1
                },
                {
                    plugin_url : url,
                    wp: wp
                }
            );
        });

        // Register buttons
        ed.addButton('someplugin_button', {title : 'Insert Seomthing', cmd : 'mcebutton', image: url + '/images/some_button.gif' });
    }
});

// Register plugin
// first parameter is the button ID and must match ID elsewhere
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('someplugin_button', tinymce.plugins.someplugin);

})();

我們感興趣的是這一行=>“wp：wp”。 這一行確保我們將wp對象傳遞給彈出窗口（iframe真的......），當我們點擊tinymce按鈕時將打開它。 您實際上可以通過此對象（ed.windowManager.open方法的第二個參數）將任何內容傳遞給彈出窗口！

最后但並非最不重要的是你必須引用在你的javascript上傳遞wp對象，如下所示：

    var args = top.tinymce.activeEditor.windowManager.getParams();
    var wp = args.wp;

確保在調用/使用WP對象之前執行此操作。

這就是你要做的所有工作。 它對我有用，我希望它適合你:)