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.