Позиционирование курсора в DesignMode
 

Здраствуйте. Учень нужна помощь. При вставке в документ с заданым designmode картинки курсор оказывается слева от нее, что разумеется не кошерно. Вопрос, это я как то не так вставляю картинку или это требует дополнительных манипуляций?

if (browse.ie) {
  var imgId = uniqueId('smile');
  var el =
    '<img id="' + imgId + '" src="' + smile.img + '" alt="' + smile.txts[0] +
    '" contentEditable="false" onResizeStart="return false">';
  maDocument.selection.createRange().pasteHTML(el);
} else {
  var el = maDocument.createElement('img');
  el.src = smile.img;
  el.alt = smile.txts[0];
  SelectionRange = maWindow.getSelection().getRangeAt(0);
  SelectionRange.deleteContents();
  SelectionRange.insertNode(el);
}

Так.. Для gecko подобных браузеров проблема решается добавлением нескольких строчек

el = maDocument.createElement('img');
el.src = smile.img;
el.alt = smile.txts[0];
SelectionRange = maWindow.getSelection().getRangeAt(0);
SelectionRange.deleteContents();
SelectionRange.insertNode(el);
/* ниже строчки что добавили */
SelectionRange.selectNode(el);
SelectionRange.collapse(false);

Ага. все равно не очень. Элементы, которые добавили через insertNode подсвечиваются серым в дальнейшем.

как оказалось подсвечивание серым совсем не от этого. оно и раньше было. теперь осталось от него избавиться, но не понятно откуда оно взялось

все это не работает ни в хроме ни в опере

Для того, чтобы серое подсвечивание снималось надо добавлятять после вставки объекта collapse, тоесть вставка должна выглядеть так

el = maDocument.createElement('img');
el.src = smile.img;
el.alt = smile.txts[0];
SelectionRange = maWindow.getSelection().getRangeAt(0);
SelectionRange.deleteContents();
SelectionRange.insertNode(el);
/* ниже строчки что добавили */
SelectionRange.collapse(false);
SelectionRange.selectNode(el);
SelectionRange.collapse(false);

но опять же это не приводит к нужному результату не в хроме не в опере. видимо надо делать как то координально иначе

Пока остановился на таком варианте.

SelectionRange.insertNode(el);
SelectionRange.selectNode(el);
maWindow.getSelection().addRange(SelectionRange);
maWindow.getSelection().collapseToEnd();

есть некоторые косяки в хроме, но по крайней мере работает хоть как то, в опере вообще не работает.

По прежнему надеюсь что кто-то поможет?!

Какой у Вас занимательный блог :)

http://fastcoder.org/articles/?aid=609

и это тоже уже читал. читал и рыдал. от того что в разных браузерах разные методы ведут себя порой по-разному, уж извините за тавтологию)

к примеру, солнышко наше, firefox, раздвигает границы существующего range'а автоматически при изменении собственно границ, однако, надежда наша на светлое будущее, chrome, делает это только после select.addRange. но это пол беды. наша модница, opera, вообще на это болт ложит (уж не знаю почему). "Мама! Она меня игнорирует!!!" методы setStartBefore, setStartAfter, setEndBefore, setEndAfter опять же ведут себя изредка непредсказуемо, что страшно нервирует.