Javascript: Get/Set Caret Cursor position in iframe WYSIWYG editor

I've been working on this for 3 months now on and off, using code snippets from the net and asking questions in forums, etc. I'm trying to get a RTE to autosave as the user is typing. I still don't have a viable solution that works cross browser but I will keep this post updated as I progress. The following works in Firefox:

The idea is that we insert an image as a marker (I use a nice loading symbol in an animated gif). Later or immediately afterwards, we can select the image and remove it, restoring the caret to it's original position. Here's the code:

Please see right hand panel before copying >

//USAGE:
//before the save:
insertAtCursor("myIframe",'<img src="images/marker-autosave.gif" id="caret" />', 0); //change 0 to 1 if you want the user's selection to be replaced by the img

//after the save:
resetCaret("myIframe");


function insertAtCursor(iframename, text, replaceContents) {
      if(replaceContents==null){replaceContents=false;}
      if(!replaceContents){//collapse selection:
         var sel=document.getElementById(iframename).contentWindow.getSelection()
         sel.collapseToStart()
      }
      document.getElementById(iframename).contentWindow.document.execCommand('insertHTML', false, text);
};


function resetCaret(iframename){
      var iframe=document.getElementById(iframename).contentWindow
      var referenceNode = iframe.document.getElementById("caret");
      if(referenceNode){
         var sel=document.getElementById(iframename).contentWindow.getSelection()
         //alert(sel.focusNode)
     
         if(sel.focusNode){//firefox:
  var range=sel.getRangeAt(0);
         }else{//chrome:
  var range=iframe.document.createRange()
         }
      range.selectNode(referenceNode);
      range.deleteContents();
      }
}