Contenteditable DIV - как я могу определить, находится ли курсор в начале или в конце содержимого

У меня есть контентный блок, который содержит типичный HTML-редактор wysiwyg (жирный шрифт, привязки, списки).

Мне нужно определить, находится ли текущий курсор onKeyDown в начале и в конце div. Причина этого в том, что в зависимости от позиции курсора и нажатой клавиши я мог бы захотеть объединить этот div с предыдущим div на backspace или создать новый следующий div при вводе.

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

Я надеюсь, что упускаю из виду какое-нибудь простое решение.

Есть относительно простой способ определить это - я открыт для использования такой библиотеки, как Rangy.

Спасибо!

Редактировать: Я думаю примерно так:

$('.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)
}

Могу ли я столкнуться с какими-то странными проблемами с чем-то вроде этого?

14
задан Edward M Smith 17 September 2011 в 00:13
поделиться