Wordpress change functionality of TinyMCE button U

Question

does anybody know how to change functionality of button in wordpress content textarea? There is a "u" button (underline) which makes text

<span style="text-decoration-line: underline;">text underlined</span>

what I need is change functionality of this button to put in content:

<u>text underlined</u>

Can someone help?

Answer 1

You can get this formatting once you define the underline format in the init method.

HTML

<form>
    <textarea id='instance1'></textarea>
</form>
<button id='get'>Test</button>
<div id='previewHTML'></div>
<div id='previewFormat'></div>

JS

var textArea_id = "#instance1";

tinymce.init({
   selector: textArea_id,
   toolbar: "underline",
   formats : {
         underline : {inline : 'u', exact : true},
   }
});


var button = document.getElementById('get');

button.onclick = function(){
   var contentHTML = tinymce.activeEditor.getContent({format: 'html'});
   document.getElementById('previewHTML').innerText = contentHTML;
   document.getElementById('previewFormat').innerHTML = contentHTML;
}

See this DEMO