首页 文章

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

提问于
浏览 次
0

尝试在Wordpress的Post Editor上的Tiny MCE编辑器上创建一个特殊按钮 . 我想为我创建的短代码工具提示创建一个按钮 .

看看我想要的输出：

我的Tooltip短代码有以下代码：

//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文件上显示我创建的自定义按钮工具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按钮 . 知道怎么做得更好吗？

php wordpress tinymce shortcode

3 回答

  • 0

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

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

    回复于
  • 0

    检查你的代码 . 我猜有无效的返回值

    function mce_tooltip($button) {
  $buttons[] = 'superscript';
  return $button;
}
    回复于
  • 0

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

    • 在/wp-content/plugins/tinymce-advanced/tinymce-advanced.php( function get_all_buttons() ）添加 $buttons[] = 'yourButton' http://prntscr.com/5ywb4p

    • 在/wp-includes/js/tinymce/tinymce.min.js之后添加一个按钮 e.addButton('yourButton',{title:'yourButton',text:"yourButton",'class' : 'yourButton-btn', onclick : function() { e.focus(); e.selection.setContent('<YourTag>' + e.selection.getContent() + '</YourTag>'); } }) http://prntscr.com/5ywc48然后进入wp-admin中的tinymce设置并将新按钮添加到编辑器中 .

    回复于

相关问题