Własny wysiwyg - zmiana wielkości i rodzaju czcionki bez tagu <font>, zgodnie z HTML5

Question

Robię sobie własny wysiwyg. Wszystkie kursy webowe piszą o funkcji execCommand. W moim kodzie jest iframka, buttony wywołujące odpowiednie funkcje przy pomocy onclick. Zwykły prosty wysiwyg.

Taka funkcja odpowiada u mnie za zmianę rozmiaru tekstu:

function changeFontsize()
{
	var size = document.getElementById('fontsizeSelect').value;
	document.getElementById('text-iframe').contentWindow.document.execCommand('FontSize', false, size);
}

A to jest zmiana czcionki

function changeFont()
{
	var name = document.getElementById('fontSelect').value;
	document.getElementById('text-iframe').contentWindow.document.execCommand('FontName', false, name);
}

Podobnie obsługuję też zmianę koloru tekstu i inne sprawy.

Wszystkie tutoriale jakie znalazłem proponują takie właśnie rozwiązanie. I jest tu pewien problem. Bo ten wysiwyg generuje mi np. taki html:

<font color="red" face="Verdana" size="5">test</font>

I problem jest taki, że toto mi generuje tag <font> który jest już zoutdatowany. A ja chcę mieć wysiwyg który generuje nowoczesny kod zgodny ze standardami HTML5.

Polecicie może jakąś inną funkcję albo inny sposób? Co zrobić żeby mój wysiwyg generował dobry, nowoczesny kod zgodny z HTML5?