Adding custom tags to innerHTML

[webopolis]

I need help figuring this out. I have a "contenteditable" div. I have a menu that does the basics, bold, italic, etc. I need to add custom tags that will be represented in the source, not visually. In other words, when I use the code below:

function myCustomTag(v) {
  var str = document.selection.createRange().text;
  document.getElementById("editor").focus();
  var sel = document.selection.createRange();
  sel.text = "<" + v + ">" + str + "</" + v + ">";
  return;
}

Which is triggered by: onClick="myCustomTag('myTag');" It surrounds the selected text as it should, but in the source it looks like: <myTag>surrounded text<myTag> Instead of: <myTag>surrounded text</myTag> Visually, in the editable div, it looks like the above, but I need it to be tags in the source, not visible on the surface.

Am I making any sense?

Any help would be appreciated.

Thanks.