Set caret (cursor) position in iframe WYSIWYG?

Discussion in 'Javascript' started by Ciaran, Jul 24, 2009.

  1. Ciaran

    Ciaran Guest

    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
     
    Ciaran, Jul 24, 2009
    #1
    1. Advertising

  2. Ciaran

    cronoklee Guest

    On Jul 24, 7:31 pm, Ciaran <> wrote:
    > 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?
     
    cronoklee, Aug 1, 2009
    #2
    1. Advertising

  3. Ciaran

    Tim Down Guest

    On Jul 24, 7:31 pm, Ciaran <> wrote:
    > 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
     
    Tim Down, Aug 3, 2009
    #3
  4. Ciaran

    cronoklee Guest

    On Aug 3, 10:14 am, Tim Down <> wrote:
    > On Jul 24, 7:31 pm, Ciaran <> wrote:
    >
    > > 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



    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
     
    cronoklee, Aug 3, 2009
    #4
  5. Ciaran

    Tim Down Guest

    On Aug 3, 6:53 pm, cronoklee <> wrote:

    > 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
     
    Tim Down, Aug 5, 2009
    #5
  6. Ciaran

    cronoklee Guest

    On Aug 5, 12:52 pm, Tim Down <> wrote:
    > On Aug 3, 6:53 pm, cronoklee <> wrote:
    >
    > > 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





    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
     
    cronoklee, Aug 7, 2009
    #6
  7. Ciaran

    Tim Down Guest

    On Aug 7, 3:47 pm, cronoklee <> wrote:
    > On Aug 5, 12:52 pm, Tim Down <> wrote:


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


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

    Tim
     
    Tim Down, Sep 3, 2009
    #7
  8. Ciaran

    Ciaran Guest

    On 3 Sep, 12:35, Tim Down <> wrote:
    > On Aug 7, 3:47 pm,cronoklee<> wrote:
    >
    >
    >
    > > On Aug 5, 12:52 pm, Tim Down <> wrote:
    > > > 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

    >
    > 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, Oct 28, 2009
    #8
  9. Ciaran

    Ciaran Guest

    On 3 Sep, 12:35, Tim Down <> wrote:
    > On Aug 7, 3:47 pm,cronoklee<> wrote:
    >
    >
    >
    > > On Aug 5, 12:52 pm, Tim Down <> wrote:
    > > > 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

    >
    > 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, Oct 28, 2009
    #9
  10. Ciaran

    Ciaran Guest

    Ciaran, Nov 25, 2009
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DaveR
    Replies:
    2
    Views:
    6,644
    Dave Rudlin
    Nov 17, 2004
  2. dmaziuk
    Replies:
    3
    Views:
    612
    Chris Gonnerman
    Jan 25, 2011
  3. brendan
    Replies:
    0
    Views:
    209
    brendan
    Aug 29, 2006
  4. Replies:
    1
    Views:
    217
  5. ReGenesis0
    Replies:
    3
    Views:
    400
    ReGenesis0
    Sep 28, 2008
Loading...

Share This Page