Tengo un contenido contento que contiene el típico editor wysiwyg html (negrita, anclas, listas).

Necesito determinar si el cursor actual está, en KeyDown, al inicio y al final del div. La razón de esto es, según la posición del cursor y la tecla presionada, es posible que desee fusionar este div con el div anterior en un espacio de retroceso, o crear un nuevo div siguiente al entrar.

He estado jugando con los rangos, pero cuando trabajas con html dentro del elemento, las cosas se ponen bastante complicadas.

Espero estar pasando por alto alguna solución simple.

Hay una manera relativamente simple de determinar esto: estoy abierto a usar una biblioteca como Rangy.

¡Gracias

Edit: estoy pensando en algo como esto:

$('.mycontenteditable').bind('keydown', handle_keydown)

handle_keydown = function(e) {

  range = window.getSelection().getRangeAt(0)
  start_range = document.createRange()
  start_range.selectNodeContents(this.firstChild)
  start_range.collapse(true) // collapse to start
  is_start = start_range.compareBoundaryPoints(Range.START_TO_START,range)
  end_range = document.createRange()
  end_range.selectNodeContents(this.lastChild)
  end_range.collapse(false)
  is_end = end_range.compareBoundaryPoints(Range.END_TO_END,range)
}

¿Voy a encontrar algún problema extraño con algo como esto?