Question

I’ve searching forever trying to figure out why IE will not save the current caret position and then reload it. To be descriptive of the situation it works like this:

Client wants Tinymce custom built with an ajax image loader that is simplistic in the nature that any “idiot” can upload and set some settings to an image within the text editor and make it look nice. We have a lot of clients that like to just paste from word and fckeditor just wasn’t cutting it any more. At any rate the ajax/the uploader all that works flawlessly. The problem becomes when entering the image into the editor. FF/Opera/Crome etc, work flawlessly, but IE of course has the problem.

Here’s what I need an answer to, the Tinymce loses focus because a jQuery dialog box pops up for the uploading (this feature can not be developed as a plugin, they want external tools, so no tinyMCEPopUp classes/functions will work so I can’t simply call tinyMCEPopup.restore()) I need to save the caret position/selection of the image and store it/pass it through some functions and when placing it restore the selection.

I’ve tried doing it hundreds of ways and only one has worked as getting the correct selection length but still cursor is at pos 0. this has worked when creating a range object in IE

if(document.selection) {
b = document.getElementById('txtarea'); 
range = b.createTextRange();
//the rest of the jaz
}

I’ve been told by many sources that getting it from the DOM won’t work because Tinymce is built inside an iframe, but createRange() is also not storing currently. If anyone knows of or has found a work around for this I’d greatly appreciate it, I’ve been racking my brain for 16hrs of development time trying to work this out with no useable solution. using tinyMCE.activeEditor.selection.getBookmark() is also having no dice. I’m average at Javascript, I know my way around but it is defiantly not my strong point, PHP/backend/software development is. So it may just be me being stupid when there is a simple solution.

Thanks for your time.

Answer 1

I still think TinyMCE will do this for you but I’m not an expert on it and haven’t got time to play with it right now (maybe later). I know about selections and Ranges though, so you may be able to adapt the functions below for your purpose. You’ll need to pass in the window object for the editor iframe into both functions:

    function saveSelection(win) {
     var doc = win.document;
     var sel = win.getSelection ? win.getSelection() : doc.selection;
     var range;

     if (sel) {
      if (sel.createRange) {
       range = sel.createRange();
      } else if (sel.getRangeAt) {
       range = sel.getRangeAt(0);
      } else if (sel.anchorNode && sel.focusNode && doc.createRange) {
       // Older WebKit browsers
       range = doc.createRange();
       range.setStart(sel.anchorNode, sel.anchorOffset);
       range.setEnd(sel.focusNode, sel.focusOffset);

       // Handle the case when the selection was selected backwards (from the end to the start in the
       // document)
       if (range.collapsed !== sel.isCollapsed) {
        range.setStart(sel.focusNode, sel.focusOffset);
        range.setEnd(sel.anchorNode, sel.anchorOffset);
       }
      }
     }
     return range;
    }

    function restoreSelection(win, range) {
     var doc = win.document;
     var sel = win.getSelection ? win.getSelection() : doc.selection;

     if (sel && range) {
      if (range.select) {
       range.select();
      } else if (sel.removeAllRanges && sel.addRange) {
       sel.removeAllRanges();
       sel.addRange(range);
      }
     }
    }