<B>Редактор текста:</B>
<BR>
напишите тут какой-нибудь текст
<BR>
выделите текст мышкой и нажмите на B
<div style="padding-top:5px; padding-bottom:10px;">
     <button onclick="change_text('<b>', '</b>'); ViewText();"><b>B</b></button>
     <input type="color" onchange="change_text('<font color=' + this.value + '>', '</font>'); ViewText();">
</div>

<textarea id="editableTextarea" style="height:200px; width:600px; border:1px solid gray;" onkeyup='ViewText();'>
<b>Hello!</b>
<font color=blue>How do you do?</font>
</textarea>

<div style="padding-top:10px;">
     <font>Текст для просмотра:</font>
</div>

<div id="DivView" style="height:200px; width:600px; border:1px solid gray; background-color:#E0E0E0; display:none;">
</div>

<script language="JavaScript">
     function ViewText()
     {
          document.getElementById("DivView").style.display = "";
          document.getElementById("DivView").innerHTML = document.getElementById("editableTextarea").value;

          // заменяем "\n" на "<BR>" во всем тексте
          var text = document.getElementById("DivView").innerHTML;
          text = text.replace(new RegExp("\n","g"), "<BR>");
          document.getElementById("DivView").innerHTML = text;
     }

     function change_text(tag1, tag2)
     {
          if (tag1=="" || tag2=="")
               return;

          var elemText = document.getElementById("editableTextarea");
          if (elemText==null)
               return;

          // get text
          var text = elemText.value;

          // get position
          var posSelection1 = elemText.selectionStart;
          var posSelection2 = elemText.selectionEnd;

          // get 2 text
          var str1 = text.substr(0, posSelection1);
          var strMiddle = text.substr(posSelection1, posSelection2-posSelection1);
          var str2 = text.substr(posSelection2);

          // set text
          elemText.value = str1 + tag1 + strMiddle + tag2 + str2;
          elemText.selectionStart = str1.length + tag1.length;
          elemText.selectionEnd = elemText.selectionStart+strMiddle.length;
          elemText.focus();
     }

     ViewText();
</script>