php 将自定义按钮添加到TinyMCE以在Wordpress上创建自定义格式

Posted 2021-05-04

/*
 * Add custom button to TinyMCE for create custom formats on Wordpress
 * From https://wordpress.stackexchange.com/questions/128931/tinymce-adding-css-to-format-dropdown/128950 
 */
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
  
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
}

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {
  
  $style_formats = [
    [
      'title' => 'My Test',
      'selector' => 'p',
      'classes' => 'mytest',
    ],
    [
      'title' => 'AlertBox',
      'block' => 'div',
      'classes' => 'alert_box',
      'wrapper' => true
    ],
    [
      'title' => 'Red Uppercase Text',
      'block' => 'span',
      'classes' => 'builder-subtitle',
      'styles' => [
        'color'         => 'red', // or hex value #ff0000
        'fontWeight'    => 'bold',
        'textTransform' => 'uppercase'
      ]
    ]
  ];
  
  $settings['style_formats'] = json_encode( $style_formats );
  
  return $settings;
}