Hice el ejemplo así porque habías dicho que era un div editable pero funciona con un iframe editable también:
Con iframe editable
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AEInbetween.com</title>
<script>
function loadThis(){
var iframe = document.getElementById('Editor');
var doc = iframe.contentWindow.document;
doc.body.innerHTML = iframe.innerHTML;
doc.body.contentEditable = true;
}
function x()
{
//oSel=this.selection
var iframe = document.getElementById('Editor');
var doc = iframe.contentWindow.document;
//if (!oSel) {
document.frames['Editor'].focus();
return oSel = doc.selection.createRange();
//oSel.type = Editor.document.selection.type
//}
}
function insertarHTML(sHTML)
{
var sType
//llamo a la funcion que me da la selección
var sel =x();
//sType = sel.type
//if (sType=="Control")
//sel.item(0).outerHTML = sHTML
//else
//{
sel.pasteHTML(sHTML);
}
</script>
</head>
<body onload="loadThis()">
<iframe id="Editor" name="Editor" width="100%" height="200px" contenteditable="true">Some text</iframe>
<button onclick="insertarHTML('sHTML')">Try Me</button>
</body>
</html>