Получить курсор в элементе с 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

da_ff, я уже нашёл)) Осталось разобраться с Оперой, там в приведённом вами примере для Gecko она вставляет в начало текстовой области...

Maxman,
возможно это кусок из старого проекта, сейчас уже не помню были ли проблемы с оперой и что делал

Здравствуйте, уважаемые. Не хочется плодить темы, поэтому здесь задам вопрос.
Возникла следующая проблема. Если я в див вставляю <span> то в CHROME курсор остается в нем.(то есть при следующей вставке новый html вставляется в span, а не див).

var el =document.createElement('i');
el.style.color='red';
el.innerHTML='fg45';
selectionRange = window.getSelection().getRangeAt(0);
selectionRange.deleteContents();
selectionRange.insertNode(el);
window.getSelection().removeAllRanges();
selectionRange = document.createRange();
selectionRange.selectNode(el);
selectionRange.collapse(false);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(selectionRange);

Следующий код нормально работает в FF и Опере.
Натолкните на мысль

Все разобрался, это баг CROME