Solved

I have this small function that allows a user to select tags. What it doesn't do, it doesn't place the cursor between the two tags when the button is clicked (Bold, Italic or Underline).

function formatText(tag) {
var Field = document.getElementById('some-input');
var val = Field.value;
var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
var before_txt = val.substring(0, Field.selectionStart);
var after_txt = val.substring(Field.selectionEnd, val.length);
Field.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt;
}

Code (markup):

<a href="javascript:formatText('b')" class="small_button">Bold</a>
<a href="javascript:formatText('i')" class="small_button">Italic</a>
<a href="javascript:formatText('u')" class="small_button">Underline</a>

Code (markup):

 

This does what I want. So it's all good.

<a class="small_button" id="b"><b>Bold</b></a>
<a class="small_button" id="i"><i>Italic</i></a>
<a class="small_button" id="u"><u>Underline</u></a>
<a class="small_button" id="l">Large</a>

Code (markup):

function addTagSel(tag, idelm) {
  var tag_type = new Array('<', '>');        // for BBCode tag, replace with:  new Array('[', ']');
  var txta = document.getElementById('some-input');
  var start = tag_type[0] + tag + tag_type[1];
  var end = tag_type[0] +'/'+ tag +  tag_type[1];
  var IE = /*@cc_on!@*/false;    // this variable is false in all browsers, except IE

  if (IE) {
    var r = document.selection.createRange();
    var tr = txta.createTextRange();
    var tr2 = tr.duplicate();
    tr2.moveToBookmark(r.getBookmark());
    tr.setEndPoint('EndToStart',tr2);
    var tag_seltxt = start + r.text + end;
    var the_start = txta.value.replace(/[\r\n]/g,'.').indexOf(r.text.replace(/[\r\n]/g,'.'),tr.text.length);
    txta.value = txta.value.substring(0, the_start) + tag_seltxt + txta.value.substring(the_start + tag_seltxt.length, txta.value.length);

    var pos = txta.value.length - end.length;    // Sets location for cursor position
    tr.collapse(true);
    tr.moveEnd('character', pos);        // start position
    tr.moveStart('character', pos);        // end position
    tr.select();                 // selects the zone
  }
  else if (txta.selectionStart || txta.selectionStart == "0") {
    var startPos = txta.selectionStart;
    var endPos = txta.selectionEnd;
    var tag_seltxt = start + txta.value.substring(startPos, endPos) + end;
    txta.value = txta.value.substring(0, startPos) + tag_seltxt + txta.value.substring(endPos, txta.value.length);

    // Place the cursor between formats in #txta
    txta.setSelectionRange((endPos+start.length),(endPos+start.length));
    txta.focus();
  }
  return tag_seltxt;
}

document.getElementById('b').onclick = function() {
  var tag_seltxt = addTagSel('b');
  return tag_seltxt;
}

document.getElementById('i').onclick = function() {
  var tag_seltxt = addTagSel('i');
  return tag_seltxt;
}
document.getElementById('u').onclick = function() {
  var tag_seltxt = addTagSel('u');
  return tag_seltxt;
}
document.getElementById('l').onclick = function() {
  var tag_seltxt = addTagSel('h5');
  return tag_seltxt;
};

Code (markup):

 

Some advice:

1) don't use U, use DEL. There hasn't been a U tag since 1997.

2) if you have a bunch of var in a row, comma delimit and only say var ONCE.

3) If all those functions are doing the same thing, find some way to store that on the element and have a single core function to handle that.

4) since you didn't make those elements in the JS, it's probably NOT good practice to use onclick to assign the functions, use addeventlistener and/or attachevent.

 

You mean like <del></del>? But that doesn't underline text, it strikes it out.