DIV (content editable) cursor positions function

This site is best viewed in a modern browser with JavaScript enabled.

DIV (content editable) cursor positions function

vouzamo

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

<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

aj_nsc

Check out the comments here

The third one down looks particularly helpful

vouzamo

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.

	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?

vouzamo

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

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?

vouzamo

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_me

vouzamo;1012750 wrote:
[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]

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.

vouzamo

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