Question

我正在尝试使用wordpress 4.1中的tinmyce插件创建一个标签短代码这是我的functions.php，用于向编辑器添加短代码按钮。

function site_shortcodes() {
  if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) return;
  if ('true' == get_user_option( 'rich_editing')):
    add_filter( 'mce_external_plugins', 'site_tinymce_plugin' );
    add_filter( 'mce_buttons', 'site_mce_button' );
  endif;
}
add_action('admin_head', 'site_shortcodes');

function site_tinymce_plugin($plugin_array) {
  $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/shortcodes.js';
  return $plugin_array;
}

function site_mce_button($buttons) {
  array_push( $buttons, 'my_mce_button' );
  return $buttons;
}

我的shortcodes.js文件是

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
    editor.addButton( 'my_mce_button', {
        text: 'Shortcodes',
        icon: false,
        type: 'menubutton',
        menu: [
            {
            text: 'Tabs',
                onclick: function() {
                    editor.windowManager.open( {
                        title: 'Insert Tabs',
                        body: [
                            {
                                type: 'textbox',
                                name: 'tabnum',
                                label: 'Number of Tabs',
                                value: ''
                            }

                        ],
                        onsubmit: function( e ) {
                            var $tabs_li = '';
                            for(var i = 1;i <= e.data.tabnum;i++){
                                $tabs_li += '[tab id="Tab ' + i + '" ]Content ' + i + '[/tab]';
                            }
                            editor.insertContent('[tabs]' + $tabs_li + '[/tabs]');
                        }
                    });
                }
            },      
         ]
      });
  });
})();

和我的shortcode.php

add_shortcode( 'tab', 'tab' );

function tab($attr, $content = null) {
$output = '';

$output .= '<li>'.$content.'</li>';

return '<ul>'.$output.</ul>';
}

我的目标是获得模式

<ul class="tabs">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

但它的打印方式如

    <ul><li></li></ul>
    <ul><li></li></ul>
    <ul><li></li></ul>
    <ul><li></li></ul>

任何想法如何解决这个问题？

Answer 1

哦......似乎你的代码逻辑中存在问题。

concept

将打印

[tabs]foo[/tabs]。

您应首先找到该组的第一个<ul><li>foo</li></ul>，打印[tabs]，然后打印每个<ul>打印[tab][/tab]，接下来，在该组的末尾，打印结尾<li></li>。

Wordpress Tinymce Tabs（ul - li elements）

1 个答案: