TinyMCE Editor change underline button behavior - u tag instead of span text-decoration underline

Question

As above. I want to change the WordPress Edtior TinyMCE behavior when I click the underline button I want the TinyMCE to wrap my selection with <u></u> tags. Now, I know that the u tag was deprecated in HTML 4~ but according to W3 it can be used in HTML5 again. Anyways! I need a <u> tag - not a <span>.

Is there a way to change the default underline button behavior without any shortcodes or editing core files? Something like a hook to change the editor behavior in functions.php would be nice :) Thanks!

Answer 1

After few days I got it to work. Gotta check those core files, now I know how. Anyways, here is the working code:

function my_tiny_mce_tweaks( $first_init ) {
  $first_init['formats'] = '{' .
      'alignleft: [' .
          '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"left"}},' .
          '{selector: "img,table,dl.wp-caption", classes: "alignleft"}' .
      '],' .
      'aligncenter: [' .
          '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"center"}},' .
          '{selector: "img,table,dl.wp-caption", classes: "aligncenter"}' .
      '],' .
      'alignright: [' .
          '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"right"}},' .
          '{selector: "img,table,dl.wp-caption", classes: "alignright"}' .
      '],' .
      'strikethrough: {inline: "del"},' .
      'underline: {inline: "u"}' .
  '}';

  return $first_init;
}
add_filter('tiny_mce_before_init', 'my_tiny_mce_tweaks');

Just add it to functions.php and you good to go. It will be probably easier if you remove the dots . and join the string. Hope it helps!