用于短代码的WP Tiny MCE帖子编辑器上的自定义按钮

Question

尝试在Wordpress的Post Editor上的Tiny 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]

我所做的是创建了一些函数，使用以下代码在我主题的functions.php文件中显示我创建的自定义按钮TOOLTIP SHORTCODE。

//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上的TINY MCE编辑器上显示我的CUSTOM按钮。知道怎么做得更好吗？

Answer 1

http://www.gavick.com/blog/adding-your-own-buttons-in-tinymce-4-editor/

试试这个教程，它有效。它教导如何为新的tinymce 4添加自定义按钮以及如何将其用于您自己的短代码

Answer 2

检查您的代码。我猜有无效的返回值

function mce_tooltip($button) {
  $buttons[] = 'superscript';
  return $button;
}

Answer 3

对于TinyMCE高级版本：4.1.1请按照以下步骤操作：

1. 在/wp-content/plugins/tinymce-advanced/tinymce-advanced.php({ {1}}）中添加function get_all_buttons() http://prntscr.com/5ywb4p
2. 在/wp-includes/js/tinymce/tinymce.min.js之后添加一些按钮 $buttons[] = 'yourButton' http://prntscr.com/5ywc48 然后进入wp-admin中的tinymce设置并将新按钮添加到编辑器中。