www.webdeveloper.com
Results 1 to 8 of 8

Thread: DIV (content editable) cursor positions function

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    DIV (content editable) cursor positions function

    Hi,

    I am in the process of building a custom WYSIWYG text editor but am struggling to get started because I need it to be cross browser. I will be using a div for the text and images with event handlers for the controls (bold, italic etc). My problem is creating a function / functions which return the cursor position or the start and end positions (if text is highlighted).

    Code:
    <script type="text/javascript">
    function bold(){
    var e = document.getElementById('wysiwyg');
    
    ! What can I use here to get the selected index / cursor position ! 
    
    }
    </script>
    <div id="wysiwyg" contenteditable>
    TEXT GOES HERE
    </div>
    <input type="button" value="B" onClick="bold();">
    Any advice is welcome

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Check out the comments here


    The third one down looks particularly helpful

  3. #3
    Join Date
    Jun 2007
    Posts
    73
    Thank you for the prompt response... on reading the link you sent me I have the following code which returns the start and end index for a selection in Firefox. However, I need it to work in Internet Explorer also.

    Code:
    	var userSelection;
    	if (window.getSelection) {
    		userSelection = window.getSelection();
    	}
    	var start = userSelection.anchorOffset;
    	var end = userSelection.focusOffset;
    How can this be adapted to work cross browser?

  4. #4
    Join Date
    Jun 2007
    Posts
    73
    ...another consideration is that the values given for start and end are relative to the window / document. how can I get values relative to the div (wysiwyg)?

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    what do you mean exactly by cursor positions?

    remembering that contentEditables can have more than one selection, what format would the data you you want to see take?

    in a textarea, simple [start,end] coords work great, but an element is FAR more complicated.

    as i see it, you would need to know [[startElm,startOffset,endElm,elmOffset]] at least.

    is that what you are looking for?

  6. #6
    Join Date
    Jun 2007
    Posts
    73
    what do you mean exactly by cursor positions?
    The start and end positions of the current highlighted selection in a div. These values need to be relative to the start of the div.innerHTML
    remembering that contentEditables can have more than one selection, what format would the data you you want to see take?
    just two values for the start and end indexed to be stored in local variables to be passed to a function.
    in a textarea, simple [start,end] coords work great, but an element is FAR more complicated.

    as i see it, you would need to know [[startElm,startOffset,endElm,elmOffset]] at least.
    That would probably be okay dependant on the size of the page.
    is that what you are looking for?
    In short, all I need is a way to extract the start index of a highlighted selection from a contenteditable div along with the end index of the highlighted selection. In the event of text not being highlighted / selected I would want the cursor position (i.e. the start and end indexes would be the same value). These would be requested by a javascript function from an onClick event button thrown by an element outside of the div. If the bold function was called I would use the start index to split the div.innerHTML and insert <b>. I would use the end index to add </b>. Does this make sense?

  7. #7
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by vouzamo View Post
    In short, all I need is a way to extract the start index of a highlighted selection from a contenteditable div along with the end index of the highlighted selection. In the event of text not being highlighted / selected I would want the cursor position (i.e. the start and end indexes would be the same value). These would be requested by a javascript function from an onClick event button thrown by an element outside of the div. If the bold function was called I would use the start index to split the div.innerHTML and insert <b>. I would use the end index to add </b>. Does this make sense?
    i feel your pain, as ironically, i am working on this exact problem right now.
    i am creating a pseudo textarea from a <pre> tag with the DOM api of a real textarea, independent of markup.

    but, it's not easy; i'm about 40 hours in, and still haven't gotten .selectionStart to be set correctly, though it can be get'd just fine...

    in short, i think you'll find it much easier to use the native WYSIWYG edit features to add your markup. you can use ranges or document.execCommand.

    i have a huge existing set of editing functionality tied up in my existing textarea-based editor, so i am locked into a text based approach.

    if you don't have that encumbrance, it's a lot easier to edit html via dom instead of text.

    if you have to do it stringy:

    i can't post any code from my project.
    But, i will tell you that if you have less than a few dozen KB, inserting a special char via DOM-based selection methods, and splitting the .innerHTML or .textContent on that char is the simplest and often the fastest way to get TO the cursor's pos in a string. that's a big hint.

    you can also iterate childNodes and count .data.length, but perhaps i've already said to much..

    good luck man, it's a challenge.

    perhaps a library might provide some heavy lifting, I didn't look but if anyone reading this knows of one, I'd love to check it out.

  8. #8
    Join Date
    Jun 2007
    Posts
    73
    Thank you for your advise. It is appreciated. I will have to do some further investigation given what you have advised.

    Kind regards,

    John Askew

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles