在WP Tiny MCE帖子编辑器上创建用于快捷码的特殊按钮

时间：2014-08-15 作者：user2918348

我试图在Wordpress的Post editor上的微型MCE编辑器上创建一个特殊按钮。我想为我创建的快捷代码工具提示创建一个按钮。

我的工具提示快捷码有以下代码：

//Text tooltip
function tooltip($atts, $content = \'\'){
    $atts = shortcode_atts(
        array(
          \'class\' => \'\',
          \'title\' => \'\'
        ), $atts);


     $html = \'<a class="\' . $atts[\'class\'] .\'"  title="\'. $atts[\'title\']. \'" href="#">\' . $content . \' <span>\' .$atts[\'title\']. \'</span> </a>\';
    return $html;    
  } 

add_shortcode(\'tooltip\', \'tooltip\');

现在，当您执行此操作时，将使用以下代码作为快捷码：

[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip]

我所做的是创建了一些函数，以在函数上显示我创建的工具提示快捷码。php文件对我的主题使用以下代码。

//Create Tiny MCE buttons
function mce_tooltip($button) {
  $buttons[] = \'superscript\';
  return $button;
}
add_filter(\'mce_buttons_2\', \'mce_tooltip\');



/*
* Callback function to filter the MCE settings
*/

function mce_tooltip( $init_array ) {  

// Define the style_formats array

  $style_formats = array(  
    // Each array child is a format with it\'s own settings
    array(  
      \'class\' => \'\',  
      \'title\' => \'\'      
  );  
  // Insert the array, JSON ENCODED, into \'style_formats\'
  $init_array[\'style_formats\'] = json_encode( $style_formats );  

  return $init_array;  

} 
// Attach callback to \'tiny_mce_before_init\' 
add_filter( \'tiny_mce_before_init\', \'mce_tooltip\' );

我尝试了代码，但在Wordpress上的微型MCE编辑器上，它不会显示我的自定义快捷键。你知道如何做得更好吗？

以下是我试图创建的输出：http://prntscr.com/4cy6fd

1 个回复

SO网友:Bryan Willis

您的功能彼此无关。您只需要一个按钮，单击该按钮即可添加[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip] 给编辑？

--这就是你目前正在做的--

First Function: function tooltip( $button ) 正在添加工具提示短代码

Second Function: mce_tooltip( $button ) 正在添加superscript 编辑器工具栏的按钮

Third Function: mce_tooltip( $init_array ) 是将样式添加到styles format dropdown editor 工具栏菜单。但是，它不会做任何事情，因为数组没有生成任何内容。

除了第二个函数和第三个函数与将您的短代码添加到编辑器无关之外，它很可能会执行任何操作或导致错误。

不能有太多同名函数。您正在使用mce\\u tooltip（）两次：

这行不通：

function mce_tooltip( $button ) {
// some code here
}
add_filter(\'mce_buttons_2\', \'mce_tooltip\');


function mce_tooltip( $init_array ) {
// some code here
}
add_filter( \'tiny_mce_before_init\', \'mce_tooltip\' );

而这将：

function mce_tooltip( $button ) {
// some code here
}
add_filter(\'mce_buttons_2\', \'mce_tooltip\');


function mce_tooltip( $init_array ) {
// some code here
}
add_filter( \'tiny_mce_before_init\', \'mce_tooltip\' );

删除当前拥有的内容，然后添加此内容以添加自定义按钮：

add_action(\'admin_head\', \'add_my_shortcode_tooltip_button\');

function add_my_shortcode_tooltip_button() {
    global $typenow;
    if ( !current_user_can(\'edit_posts\') && !current_user_can(\'edit_pages\') ) {
        return;
    }
    if( ! in_array( $typenow, array( \'post\', \'page\' ) ) )
        return;
    if ( get_user_option(\'rich_editing\') == \'true\') {
        add_filter(\'mce_external_plugins\', \'my_theme_tooltip_add_tinymce_plugin\');
        add_filter(\'mce_buttons\', \'my_theme_tooltip_register_tinymce_plugin\');
    }
}

function my_theme_tooltip_add_tinymce_plugin($plugin_array) {
    $plugin_array[\'ttip_shortcode_button\'] = get_stylesheet_directory_uri() . \'/js/editor-tooltip-button.js\'; 
    return $plugin_array;
}

function my_theme_tooltip_register_tinymce_plugin($buttons) {
   array_push($buttons, "ttip_shortcode_button");
   return $buttons;
}

然后，要构建按钮本身，请在以下位置创建javascript文件：

wp-content/themes/my-theme/js/editor-tooltip-button.js

在文件中添加以下代码：

(function() {
    tinymce.PluginManager.add(\'ttip_shortcode_button\', function( editor, url ) {
        editor.addButton( \'ttip_shortcode_button\', {
            text: \'[TOOLTIP]\',
            icon: false,
            onclick: function() {
                editor.insertContent(\'[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip]\');
            }
        });
    });
})();

或者省去你的头疼，使用一个插件：

http://wordpress.org/plugins/better-shortcodes/screenshots/

http://wordpress.org/plugins/shortcodes-pro/screenshots/

http://wordpress.org/plugins/shortcodes-ui/screenshots/

结束

小码农CODE

在WP Tiny MCE帖子编辑器上创建用于快捷码的特殊按钮

相关推荐

从自定义库函数中删除标题.php