25 November 2009

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 >

//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:

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

function resetCaret(iframename){
      var iframe=document.getElementById(iframename).contentWindow
      var referenceNode = iframe.document.getElementById("caret");
         var sel=document.getElementById(iframename).contentWindow.getSelection()
  var range=sel.getRangeAt(0);
  var range=iframe.document.createRange()


Anonymous said...

great helped me a lot!
thank you very much!

Anonymous said...

'insertHTML' !!!
it's the greatest solution :)
"Shortness - the sister of talent"
thanks :)))

Anonymous said...

This works great but doesn't work fine when you need to create a text bold.Then it gives some problem and wont allow you to create hyperlinks as well. Can you suggest something better like this.

Anonymous said...


Unknown said...

how can i maintain the cursor position in froala editors after enter key press

Unknown said...

jordan shoes
canada goose jackets uk
hermes handbags
kobe shoes
michael kors uk
ralph lauren
buy red bottoms
louis vuitton handbags outlet
rolex replica watches
christian louboutin outlet

Unknown said...

Blocks of Cheap Oakleys light reflected from the polarizing glasses horizontal leaves a reflection of the light setting of the vertical. Fashionable polarized sunglasses can do this in other areas, golfing, rowing, cycling, swimming, Oakley Outlet fishing and flying through life.

Obat Luka Bernanah said...

It is great to have visited your website. Thanks for sharing useful information. And also visit my website about health. God willing it will be useful too

Obat Sakit Dada
Obat Tumor Jinak diatas Bola Mata
Penyebab Benjolan dileher
Obat Penghilang Nyeri Lutut
Obat Penghilang Nyeri Pada Payudara
Pengobatan penyakit Meningioma

Unknown said...

I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!
360Digitmg marketing analytics in hyderabad

renuka said...

This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck.
Data-science online course in chennai

renuka said...

Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites! Thanks for sharing. Great websites!

360Digitmg Data-science course in chennai

yanmaneee said...

bape hoodie
pandora outlet
stephen curry shoes
golden goose
jordan 12
canada goose outlet
kobe byrant shoes
yeezy boost 350 v2
bape outlet

Priya Rathod said...

I really enjoyed while reading your article, the information you have mentioned in this post was damn good. Keep sharing your blog with updated and useful information.
DevOps Training in Hyderabad
DevOps Course in Hyderabad

Arnold DK said...

Nice post. I'm impressed! Extremely useful information. Thank you and keep up the good work. whatsapp mod

Post a Comment

Cron Design Studio: Dublin based web design & software development