if (textArea.selectionStart || textArea.selectionStart == '0') {
    var startPos = textArea.selectionStart;
    var endPos = textArea.selectionEnd;
    var cursorPos = endPos;
    var scrollTop = textArea.scrollTop;
    var SelText=textArea.value.substring(startPos, endPos);
console.log(SelText);
	SelText.style.fontcolor='red';
	textArea.value = textArea.value.substring(0, startPos) + SelText +  textArea.value.substring(endPos, textArea.value.length);
	
    textArea.focus();
    textArea.selectionStart = cursorPos;
    textArea.selectionEnd = cursorPos;
    textArea.scrollTop = scrollTop;

<form method="post">
  <select name="page">
    <option id="{FORM.PageId}" value="{FORM.PageId}"></option>
    <option id="{FORM.PageId}" value="{FORM.PageId}">{FORM.PageName}</option>
  </select><ul>
  <li id="bold">{LANG.Bold}</li>
  <li id="italic">{LANG.Italic}</li>
  <li id="underline">{LANG.Underline}</li>
  <li id="strikethrough">{LANG.Strikethrough}</li></ul>
  <span>{LANG.Size}</span><input type="number" id="size" min="5" max="15">
  <span>{LANG.Color}</span><input type="color" id="color">
  <textarea id="article" name="article"></textarea>
  <input type="submit" name="add" value="{FORM.liCreate}">
</form>

buttons = document.getElementsByTagName('li');
EditSize = document.getElementById('size');
EditColor = document.getElementById('color');
for (i=0; i<buttons.length; i++) {
    buttons[i].onclick=function(){
	switch(this.id)
	 {
		case 'bold':
		wrapTag(document.getElementById('article'),'','');
		break
		case 'italic':
		wrapTag(document.getElementById('article'),'','');
		break
		case 'underline':
		wrapTag(document.getElementById('article'),'','');
		break
		case 'strikethrough':
		wrapTag(document.getElementById('article'),'','');
		break
	 }
	}
}
EditSize.onchange = function(){wrapTag(document.getElementById('article'),'','')};
EditColor.onchange = function(){wrapTag(document.getElementById('article'),'+thisvalue+''>','')};
}

function wrapTag(textArea, openTag, closeTag) {
   if (textArea.selectionStart || textArea.selectionStart == '0') {
    var startPos = textArea.selectionStart;
    var endPos = textArea.selectionEnd;
    var cursorPos = endPos;
    var scrollTop = textArea.scrollTop;
    textArea.value = textArea.value.substring(0, startPos)
                          + openTag
                          + textArea.value.substring(startPos, endPos)
                          + closeTag
                          + textArea.value.substring(endPos, textArea.value.length);
            cursorPos += openTag.length + closeTag.length;
	
  }
}