[WP] Personalizzazioni TinyMCE

Thursday, 9 Aug 2018 - Sviluppo WordPress

Nel functions.php di un tema Child:

// ***************** Personalizzazioni TinyMCE *******************
// ***************************************************************
// Aggiungo la terza riga personalizzata

function my_mce_buttons_3( $buttons ) {
   array_unshift($buttons,'fontsizeselect');
   array_unshift($buttons, 'styleselect');
   return $buttons;
}

add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );

// Modifico i valori di font, font size e stili personalizzati

function ll_mod_mce_bar3($array) {
   $array['font_formats'] = "Lato=Lato";
   $array['fontsize_formats'] = "8px 9px 10px 12px 14px 16px 17px 24px 27px 32px 36px 47px 50px 60px 70px 77px";
   $style_formats = array(
   array(
      'title' => 'Classe personalizzata',
      'block' => 'span',
      'classes' => 'classe-personalizzata',
      'wrapper' => true,
   ),
);
$array['style_formats'] = json_encode( $style_formats );
   return $array;
}

add_filter('tiny_mce_before_init','ll_mod_mce_bar3');

function custom_editor_styles() {
   add_editor_style('custom-editor-styles.css');
}

add_action('init','custom_editor_styles');

custom-editor-styles.css

.classe-personalizzata {
color: red;
font-size: 2em;
}