将简短代码添加到TinyMCE以显示菜单下拉列表

Question

I have a shortcode for show menu:

//menu categories shortcode
function menu_categories_shortcode( $atts, $content = null ){
    extract( shortcode_atts( array(
        'menu' => ''
      ), $atts ) );
    ob_start();
        wp_nav_menu(array(
            'menu' => $menu,
            'container'       => 'ul',
            'container_class' => 'sidebar-categories',
            'items_wrap'      => '%3$s',
            'depth' => 1
        ));
    $content = ob_get_contents();
    ob_end_clean();
return $content;
}
add_shortcode('menu-categories', 'menu_categories_shortcode');

Now, i wanna add shortcode button of menu shortcode to TinyMCE for client can choose menu they want to show.

Ex: On Home page, client want to show menu with menu name is Menu 1, so shortcode will be: [menu-categories menu="Menu 1"] When client click menu shortcode button, a dropdown of all menu will be popup for client can choose menu they want.

This is my js to call menu popup:

(function() {
    tinymce.create('tinymce.plugins.menuPlugin', {
        init: function(ed, url) {
            // Register commands
            ed.addCommand('mcebutton', function() {
                ed.windowManager.open({
                    file: url + '/menu_popup.php',
                    width: 220 + parseInt(ed.getLang('button.delta_width', 0)),
                    height: 240 + parseInt(ed.getLang('button.delta_height', 0)),
                    inline: 1
                }, {
                    plugin_url: url
                });
            });
            // Register buttons
            ed.addButton('menu_button', {
                title: 'Choose Menu',
                cmd: 'mcebutton',
                image: url + '/icon.gif'
            });
        },
    });
    tinymce.PluginManager.add('menu_button', tinymce.plugins.buttonPlugin);
})();

The problem I've in menu_popup.php, how to i get all menus? My menu_popup.php file:

<form action="/" method="get" accept-charset="utf-8">
    <div>
        <label for="button-url">Choose Menu</label>
        <?php $menus = get_registered_nav_menus();
                    if($menus) : ?>
        <select id="button-url">
            <?php 
                 foreach ($menus as $key => $menu) : ?>
                <option value="<?php echo $menu; ?>"><?php echo $menu; ?></option>          <?php endforeach; ?>
        </select>
        <?php endif; ?>
    </div>
    <div>
        <a href="javascript:ButtonDialog.insert(ButtonDialog.local_ed)" id="insert" style="display: block; line-height: 24px;">Insert</a>
    </div>
</form>

Error i have:

Thanks so much!!!

Answer 1

In your menu_poup.php you need to include this code:

define('WP_USE_THEMES', false);
require('../../../wp-blog-header.php');

https://codex.wordpress.org/Integrating_WordPress_with_Your_Website

to access WordPress functions. I just tried it using your code and it worked.