Получить курсор в элементе с contentEditable="true"
 

Здравствуйте. Есть такая задача, нужно вставлять смайлы в текстовое поле, перед курсором (кареткой) соответственно. В качестве текстовой области используется <div contentEditable="true">
Для получения позиции текстового курсора, пробовал такой код:

function getCaretPosition (ctrl) {
	var CaretPos = 0;
	// IE
	if (document.selection) {
		ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Gecko
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
	return CaretPos;
}

Но, он работает только с textarea. Есть какие-нибудь идеи на этот счёт?

Так... Уже лучше :) Нашёл решение для основных браузеров, кроме ИЕ:

window.getSelection().getRangeAt(0).startOffset

Как-же быть с осликом то, кто-нибудь посоветует?

Вопрос решён. Если кому-то интересно:

function getCaretPos(element) {
	element.focus();
	if (document.selection) {
		var sel = document.selection.createRange();
		var clone = sel.duplicate();
		sel.collapse(true);
		clone.moveToElementText(element);
		clone.setEndPoint('EndToEnd', sel);
		return clone.text.length;
	} else {
		return window.getSelection().getRangeAt(0).startOffset;
	}
	return 0;
}

для такой простой задачи вообще не нужно знать позицию курсора. есть специальные ручки для вставки в позицию курсора произвольного хтмл

tenshi, а можно поподробнее?

ie
gecko

da_ff, спс, но в Опере добавляет всегда в начало, не могу понять почему...

Кстати, в Опере

document.execCommand('insertimage', true, this.src);

тоже добавляет всегда в начало... Что это за фигня такая? И ещё, в диве c contentEditable="true" такая штука наблюдается, что все вставленные в него img ресайзятся, как эту ресизабельность отключить?

видимо вручную задавая размеры картинке

ie
gecko