removing "2" in the ending tag "[/size2]

**dotJoon** · May 4, 2007, 02:44

Code:

<script type='text/javascript'>

function ubbc(open, end){ 
    var tArea = document.myform.box; 
    var isIE = (document.all)? true : false; 
    var open = (open)? open : ""; 
    var end = (end)? end : ""; 

    if(isIE){ 
        tArea.focus(); 
        var curSelect = document.selection.createRange(); 
        if(arguments[2]){ 
            curSelect.text = open + arguments[2] + "]" + curSelect.text + end; 
        } else { 
            curSelect.text = open + curSelect.text + end; 
        } 
    } else if(!isIE && typeof tArea.selectionStart != "undefined"){ 
        var selStart = tArea.value.substr(0, tArea.selectionStart); 
        var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length); 
        var curSelection = tArea.value.replace(selStart, '').replace(selEnd, ''); 
        if(arguments[2]){ 
            tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd; 
        } else { 
            tArea.value = selStart + open + curSelection + end + selEnd; 
        } 
    } else { 
        tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end; 
    } 
} 

</script>

<form name='myform' >

<select onchange="ubbc('['+this.options[selectedIndex].value+']', '[/'+this.options[selectedIndex].value+']');this.selectedIndex=0;">
<option value=noSize style=color:gray>size</option>
<option value=size1>1</option>
<option value=size2>2</option>
</select>

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

</form>

I have the code above and its result at http://dot.kr/test/20.htm.

If a user set a block to myText with his or her mouse and select 2 from the selection, The pseudo tag "[size2][/size2 ]" will generated around "myText."
So it will be [size2]myText[/size2].

Now I am telling you what I want.

I like to generate "[size2]myText[/size]" instead of "[size2]myText[/size2]."

**Raffles** · May 4, 2007, 06:09

I had a go at it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
  </style>
  <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>
</head>
<body>
<form name="myform">
<select name="sizeChanger">
<option value="noSize" style="color:gray">size</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<textarea name="box" id="t1" style="width:300px;height:200px">myText</textarea> 
</form>
</body>
</html>

I don't know if this will work in Safari though.