Establecer el cursor después del elemento span dentro de div contenteditable

¿Cómo puedo establecer el cursor después de un elemento span dentro de un div satisfactorio? En este momento, tengo una imagen dentro de un elemento span, dentro de la div contenteditable.

Cuando agrego algunos caracteres, se agregan dentro del tramo, pero quiero que se agreguen después del elemento span. ¿Alguna idea de cómo puedo lograr esto?

En buscadores que no sean IE <= 8, esto lo hará:

function placeCaretAfterNode(node) { if (typeof window.getSelection != "undefined") { var range = document.createRange(); range.setStartAfter(node); range.collapse(true); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } }

Sin embargo, algunos navegadores (especialmente los basados en WebKit) tienen ideas fijas sobre qué posiciones en el documento son válidas para el cursor y normalizarán cualquier rango que agregue a la selección para cumplir con esas ideas. El siguiente ejemplo hará lo que quieras en Firefox e IE 9 pero no en Chrome o Safari como resultado:

http://jsfiddle.net/5dxwx/

Ninguna de las soluciones alternativas es buena. Las opciones incluyen:

agregue un carácter de espacio de ancho cero después del tramo y selecciónelo
utilice un elemento lugar de un porque WebKit hace una excepción para los elementos

Esta función maneja lo que tenía en mente:

Solo span.contentEditable = false para que la solución de Tim funcione correctamente;)

Pude resolver este problema usando la etiqueta ‘a’ con &nbsp . Ejemplo: – ""+ content/element you want to add +" "