Wordpress Tinymce Tabs（ul-li elements）

我想在wordpress 4.1中用tinmyce插件创建一个选项卡短代码。这里是我的functions.php中添加短代码按钮的编辑器。Wordpress Tinymce Tabs（ul-li elements）

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>

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

来源

2015-02-23 user1925151

-1

哦......看起来你在代码逻辑中遇到了问题。

[tabs]foo[/tabs]

将打印

<ul><li>foo</li></ul>。

你应该先发现的组，打印<ul>的第一[tabs]，然后为每个[tab][/tab]打印<li></li>，接着，在该组的最后，打印结束</ul>。

来源

2015-10-19 06:28:55

Wordpress Tinymce Tabs（ul-li elements）

回答

相关问题