anchorOffset and contenteditable

[djh101]

I am working on a function that will style text in a contenteditable div. For example, when Ctrl+b is pressed, <b></b> tags will be inserted around the currently selected text. The problem is that, unlike a textarea, a contenteditable div is not made up of a single text node.

function moobar(element,e){
	if(e.keyCode == "17"){ //IF CTRL IS PRESSED
		var selectionStart = window.getSelection().anchorOffset;
		var selectionEnd = window.getSelection().focusOffset;
		var range = document.createRange(), selection = window.getSelection();
		var foobar = document.createElement('div');
		
		if(selectionStart == selectionEnd){
			//NO TEXT IS HIGHLIGHTED
			//I'LL DEAL WITH THIS PART LATER
		} else {
			if(selectionStart > selectionEnd){
				foobar.innerHTML = element.innerHTML.substring(0, selectionEnd);
				element.innerHTML = element.innerHTML.substring(0, selectionEnd) + "<b>" + element.innerHTML.substring(selectionEnd,selectionStart) + "</b>" + element.innerHTML.substring(selectionStart);
			} else {
				foobar.innerHTML = element.innerHTML.substring(0, selectionStart);
				element.innerHTML = element.innerHTML.substring(0, selectionStart) + "<b>" + element.innerHTML.substring(selectionStart,selectionEnd) + "</b>" + element.innerHTML.substring(selectionEnd);
			}
			range.setStart(element.childNodes[foobar.children.length+2],0);
		}
		range.collapse(true);
		selection.removeAllRanges();
		selection.addRange(range);
	}
}

Might there be a possible way to find out which child of the editable div the offsets are in? For example, if div1's innerHTML was "Some <b>bolded</b> text" and "ex" was highlighted, would there be a way to find out that anchorOffset is inside div1.childNode[2]? If not, then what I really need are just some general suggestions about where to go from here?

[devnull69]

Why not use the build-in functionality for contenteditable elements?

For example: The browser will automatically insert <b> and </b> around your selected text of a contenteditable element if you do this

document.execCommand('bold', false, null);

See this: https://developer.mozilla.org/en/Ric...ing_in_Mozilla

It works in all normal browsers

[BubikolRamios]

Bringing this up, coz I have related problem.

1.I need to read (crossbrowser) start and end point of selection in contentEditable div.
2.set selection, from java script, 'right back' where I read it.

reason:

document.execCommand('insertHTML'...

replaces HTML, but selection & focus are lost.

I'm getting nowhere here, so please help.

[007julien]

It's very difficult to work contenteditable elements. See the source of NicEdit or use it.

[BubikolRamios]

Nope, it is not, once you decide , that only command from execCommand you will ever use is : 'insertHTML'.

Then everything is under your control.

For this to work same as all the rest of execCommand (is applayed but focus and selection are not lost), I need to make selection right after execCommand( 'insertHTML'... is executed. Selection on newly inserted html chunk.

Help on that needed.

And yes, NicEdit, surfed to that, to much code for realy simple thing. Havent seen ever any 'plugin' that I could use rigth out of the box , same goes for NicEdit.
Trying to modify any plugin, realy, allways shows more time waster comparing to DIY.