Set caret (cursor) position in iframe WYSIWYG?

[Ciaran]

Hi I have a working WYSIWYG (copied mostly from
http://themaninblue.com/writing/perspective/2005/01/27/). I'm trying
to auto save the content but the save resets the caret position to the
beginning of the input which disrupts the flow of the user typing.

It's a complicated on I know but can anyone suggest a way to get the
cursor position before the save and set it back to that same position
after the save? I'd even be happy to just set the caret to the very
end of the input rather than the very beginning.

I patched together this function which sets the caret position in a
textarea. It might be a good starting point:

function setCursor(el,st,end) {
if(st=='end'){ //jump to end:
end=el.value.length
st=end;
}else if (st=='start'){ //jump to start:
el.focus();
return(1);
}
if(el.setSelectionRange) {//jump to position:
el.focus();
el.setSelectionRange(st,end);
}else {
if(el.createTextRange) {
range=el.createTextRange();
range.collapse(true);
range.moveend('character',end);
range.moveStart('character',st);
range.select();
}
}
}


Thanks for any help!
Ciarán

 

[cronoklee]

Hi I have a working WYSIWYG (copied mostly fromhttp://themaninblue.com/writing/perspective/2005/01/27/). I'm trying
to auto save the content but the save resets the caret position to the
beginning of the input which disrupts the flow of the user typing.

It's a complicated on I know but can anyone suggest a way to get the
cursor position before the save and set it back to that same position
after the save? I'd even be happy to just set the caret to the very
end of the input rather than the very beginning.

I patched together this function which sets the caret position in a
textarea. It might be a good starting point:

function setCursor(el,st,end) {
        if(st=='end'){ //jump to end:
                end=el.value.length
                st=end;
        }else if (st=='start'){ //jump to start:
                el.focus();
                return(1);
        }
        if(el.setSelectionRange) {//jump to position:
                el.focus();
                el.setSelectionRange(st,end);
        }else {
                if(el.createTextRange) {
                        range=el.createTextRange();
                        range.collapse(true);
                        range.moveend('character',end);
                        range.moveStart('character',st);
                        range.select();
                }
        }

}

Thanks for any help!
Ciarán

Anyone got any ideas for this?

 

[Tim Down]

Hi I have a working WYSIWYG (copied mostly fromhttp://themaninblue.com/writing/perspective/2005/01/27/). I'm trying
to auto save the content but the save resets the caret position to the
beginning of the input which disrupts the flow of the user typing.

To save having to scour through all the code for that editor, could
you tell us what saving actually does, specifically to the DOM in the
editor iframe?

Tim

 

[cronoklee]

To save having to scour through all the code for that editor, could
you tell us what saving actually does, specifically to the DOM in the
editor iframe?

Tim

Hi Tim, thanks a lot for the interest in this. When the content is
saved, a function updateWidgInput() is called. This runs two functions
called paragraphise() and cleanSource(), one of which is causing the
caret position to be reset. If you have a look at
http://themaninblue.com/experiment/widgEditor/scripts/widgEditor.js
and do an in-page search for these function names you'll see what is
happening.

I don't know exactly how these functions work, so rather than attempt
to edit them, I was hoping to save the caret position into a variable
before the updateWidgInput function is called and then set it back to
the same position immediately afterwards.

What do you think?
Ciarán

 

[Tim Down]

Hi Tim, thanks a lot for the interest in this. When the content is
saved, a function updateWidgInput() is called. This runs two functions
called paragraphise() and cleanSource(), one of which is causing the
caret position to be reset. If you have a look athttp://themaninblue.com/experiment/widgEditor/scripts/widgEditor.js
and do an in-page search for these function names you'll see what is
happening.

I don't know exactly how these functions work, so rather than attempt
to edit them, I was hoping to save the caret position into a variable
before the updateWidgInput function is called and then set it back to
the same position immediately afterwards.

What do you think?

It's quite a tricky thing to do. The function you have for textareas
won't help you. It's also complicated by the fact that the mechanism
by which you change or store selection information is vastly different
bewteen IE and all other browsers.

You need a way of storing the selection that will survive the DOM
being changed. The easiest and most reliable way I think would be to
insert invisible marker elements at the beginning and end of the
selection before saving, which is relatively easy in all browsers.
After the save, it is also relatively easy to create a selection using
the marker elements as boundaries and then remove the marker elements.
Apart from writing the code to do this, your main problems are
ensuring your marker elements survive the changes made by
updateWidgInput() and also possibly removing the marker elements from
the output of the editor: it may not be acceptable to have them in
there at all, in which case you can't use this approach.

I think the FCKeditor does something like this and probably TinyMCE
too, if you want to refer to some existing code. Otherwise, read up
about TextRange for IE and DOM Range for other browsers, and the
selection object.

Tim

 

[cronoklee]

It's quite a tricky thing to do. The function you have for textareas
won't help you. It's also complicated by the fact that the mechanism
by which you change or store selection information is vastly different
bewteen IE and all other browsers.

You need a way of storing the selection that will survive the DOM
being changed. The easiest and most reliable way I think would be to
insert invisible marker elements at the beginning and end of the
selection before saving, which is relatively easy in all browsers.
After the save, it is also relatively easy to create a selection using
the marker elements as boundaries and then remove the marker elements.
Apart from writing the code to do this, your main problems are
ensuring your marker elements survive the changes made by
updateWidgInput() and also possibly removing the marker elements from
the output of the editor: it may not be acceptable to have them in
there at all, in which case you can't use this approach.

I think the FCKeditor does something like this and probably TinyMCE
too, if you want to refer to some existing code. Otherwise, read up
about TextRange for IE and DOM Range for other browsers, and the
selection object.

Tim

Hi Tim, Thanks for the reply. Those other editors look great, but
possibly a bit feature heavy for my needs. My project is based on
simplicity and aimed at complete beginners so even the add links &
image popups in TinyMCE/FCKeditor are a bit complicated for my uses.
Your idea to insert and element before the save and remove it
afterwards is a good one. I'll look into it and post my findings here.
Thanks again for your time,
Ciarán

 

[Tim Down]

Hi Tim, Thanks for the reply. Those other editors look great, but
possibly a bit feature heavy for my needs. My project is based on
simplicity and aimed at complete beginners so even the add links &
image popups in TinyMCE/FCKeditor are a bit complicated for my uses.
Your idea to insert and element before the save and remove it
afterwards is a good one. I'll look into it and post my findings here.
Thanks again for your time,
Ciarán

I've knocked up some code that does this now: http://www.timdown.co.uk/code/selections/

Tim

 

[Ciaran]

I've knocked up some code that does this now:http://www.timdown.co.uk/code/selections/

Tim

Hi Tim, I'm only getting around to fixing up this project now and have
only just noticed your work on it! Thanks a lot for the big effort!
Your demo works well in IE and in chrome but there seems to be a small
bug in firefox where about 40% of the time, the selection is cleared
when you press save and cannot be restored. Nevertheless, I'll try
implementing your functions in my project and report back.

Thanks again for the help,
Ciarán

 

[Ciaran]

I've knocked up some code that does this now:http://www.timdown.co.uk/code/selections/

Tim

I'm a bit confused Tim, does your code work for an iframe as well as
the editable p tag you have in your demo?

I've found and tweaked a function to set the caret position in an
iframe but it returns an error regardless of the pos parameter: "index
or size is negative or greater than the allowed amount"

function setCaretTo(iframename, pos) {
obj=document.getElementById(iframename).contentWindow
var range= obj.getSelection().getRangeAt(0);
//alert('Current position: '+range.startOffset+' inside
'+range.startContainer);
range.setStart(range.startContainer, pos);
range.setEnd(range.startContainer, pos);
}
setCaretTo("contentWidgIframe",12);


Any Ideas?
Ciarán

 

[Ciaran]

I'm still working on a solution for this 3 months on. I have a
solution for firefox now. I've posted all my findings to one page for
anyone who has the same problem.

http://blog.crondesign.com/2009/11/getset-caret-cursor-position-in-iframe.html

Ciarán