Code:
<script type="text/javascript">

window.onload = function() {
  var sel = document.getElementsByName('sizeChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[size' + this.value + ']' + selection + '[/size]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[size' + this.value + ']' + selection.text + '[/size]';
    }
  }
}
</script>

<form name="myform">

<select name="sizeChanger">
<option value="noSize" style="color:gray">size</option>
<option value="1">size1</option>
<option value="2">size2</option>
</select><br>

<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 

</form>
A user can generate [size] tag with the code above at http://dot.kr/test/16-1.htm


Code:
<script type="text/javascript">

window.onload = function() {
  var sel = document.getElementsByName('colorChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[color' + this.value + ']' + selection + '[/font]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[color' + this.value + ']' + selection.text + '[/font]';
    }
  }
}
</script>

<form name="myform">

<select name="colorChanger">
<option value="noColor" style="color:gray">color</option>
<option value="1">color1</option>
<option value="2">color2</option>
</select><br>

<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 

</form>
A user can generate [color] tag with the code above at http://dot.kr/test/16-2.htm


I like to combine size select and color select into one textArea.
The following code and its result at http://dot.kr/test/16-3.htm doesn't work correctly, but it will show what I want.
Code:
<script type="text/javascript">

window.onload = function() {
  var sel = document.getElementsByName('sizeChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[size' + this.value + ']' + selection + '[/size]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[size' + this.value + ']' + selection.text + '[/size]';
    }
  }
}

window.onload = function() {
  var sel = document.getElementsByName('colorChanger')[0];
  sel.onchange = function() {
    var tArea = document.getElementById('t1');
    tArea.focus();
    var selection;
    if (tArea.selectionStart) {
      var selStart = tArea.selectionStart, selEnd = tArea.selectionEnd;
      var selBeforeStart = tArea.value.substr(0, selStart),
          selAfterEnd = tArea.value.substr(selEnd, tArea.value.length);
      selection = tArea.value.substr(selStart, selEnd - selStart);
      tArea.value = selBeforeStart + '[color' + this.value + ']' + selection + '[/font]' + selAfterEnd;
    }
    else if (document.selection) {
      selection = document.selection.createRange();
      selection.text = '[color' + this.value + ']' + selection.text + '[/font]';
    }
  }
}

</script>


<form name="myform">

<select name="sizeChanger">
<option value="noSize" style="color:gray">size</option>
<option value="1">size1</option>
<option value="2">size2</option>
</select>

<select name="colorChanger">
<option value="noColor" style="color:gray">color</option>
<option value="1">color1</option>
<option value="2">color2</option>
</select><br>

<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 

</form>