Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to place cursor where you want it.

    Back again,

    I've been working on a mozilla rtf editor.

    I finally have found a way to place the cursor to a specific point anywhere in my editable document. Here is how I did it.

    Somewhere in your program say you want to grab where the user is and head back there after you do some formating.

    You use this to grab the node they are in and how many character into the node they are:

    Code:
    //make range and select the body
    range = document.createRange();
    range.selectNode(document.body);
    			
    //get the selection
    sel = window.getSelection();
    
    //this returns how many character into the current node the cursor is
    // aka offset
    insertOffset = sel.focusOffset;
    
    //this selects the node the cursor is currently in.
    currentNode = sel.focusNode;
    The two variables currentNode and insertOffset would be passed into
    setCursor like so . . . . setCursor(currentNode,insertOffset);


    Code:
    function setCursor(targetNode,targetPoint)
    {
    
      //Setup selection range
      range = document.createRange();
    
      //Place range around the target node
      range.selectNode(targetNode);
    
      //Get the selection
      sel = window.getSelection();
    
      //Collapse to the start of the node;
      sel.collapseToStart();
    
      //From the start of the next we extend the selection to our target character
      sel.extend(targetNode,targetPoint);
    
      //Now we collapse to that point
      sel.collapseToEnd();
    
    
    }
    That will put the cursor in the node you grabbed at the offset you captured.

    Note: If you do too much processing you will loose currentNode and it will not work. What I do to work around that is count through the body until I find the current node and then just store that nodes child # so I can always get back to it.

    Obviously this is a very simple example. You have to do a lot of checking to see how many nodes deep you are and adjust your child node # if you are adding or removing nodes.


    At any rate I finally have a question as well.

    Has anyone done something like this before? It works about 95% of the time. However I have ran into an error like this:

    [Exception... "Index or size is negative or greater than the allowed amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)"]

    What I don't understand is if I look at the node I am placing the cursor in, its length is 8 and I am trying to extend the selection to 4. Which is not greater then the index and is not negative.

    There is only one situation when this occurs that I have found but I can't seem to find away around it. Any suggestions?

  • #2
    New Coder
    Join Date
    May 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured I give an update on this bit of code since no one seems to have any ideas about it.

    To force this code to work everytime, since there seems to be a problem with mozilla keeping the DOM structure solid within an editable document, these steps are taken:

    1. Back up the DOM tree until you are one tag in from the body, and get that nodes text data.

    Like this -

    Code:
    <body>Text text text <div>Here we now are!</div> More text here.</body>
    2. Now move through the bodies children until you find a match for the text data. This should be your node (if you have content that is repeated a lot this will obviously not work). For this example that div is child number 1.

    3. Now hide the div the iframe is sitting in, and then display it again. And turn editing mode back on.

    4. Then use the child number to find your node again and stick the cursor in it.

    This does get a bit more complicated if you are several nodes deep and/or want an offset value as well, but can be done.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •