DIV (content editable) cursor positions function

@vouzamoJun 09.2009

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();”> [/CODE]

Any advice is welcome

to post a comment

JavaScript

7 Comments(s) _↴

@aj_nscJun 09.2009 — #Check out the comments here

The third one down looks particularly helpful

@vouzamoauthorJun 09.2009 — #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;
 [/CODE]

How can this be adapted to work cross browser?

@vouzamoauthorJun 09.2009 — #...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)?

@rnd_meJun 09.2009 — #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?

@vouzamoauthorJun 09.2009 — #what do you mean exactly by cursor positions?

[INDENT]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[/INDENT]

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

[INDENT]just two values for the start and end indexed to be stored in local variables to be passed to a function.[/INDENT]

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.

[INDENT]That would probably be okay dependant on the size of the page.[/INDENT]

is that what you are looking for?

[INDENT]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?[/INDENT]

@rnd_meJun 10.2009 — #
[INDENT]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?[/INDENT][/QUOTE]

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.

@vouzamoauthorJun 10.2009 — #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

Also in #JavaScript _↴

Auto redirect to random page cookie based form saver - how to limit saved fields Javascript Collaps/Exapnd Div with Anchor tag

Success!

Help @vouzamo spread the word by sharing this article on Twitter...

Tweet This

DIV (content editable) cursor positions function

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

DIV (content editable) cursor positions function

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴