Внесите <a>вместо <div></div>, нажав Enter на contenteditable

Я написал немного кода в обработчике событий клавиатуры, чтобы вставить <br> в ответ на нажатие клавиши Enter:

event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');

Это работает только в том случае, если курсор находится между двумя буквами, если в конце ему нужны два <br> -Elements. Могу ли я определить, находится ли я в конце строки? Или какая-либо другая работающая идея для проблемы Enter?

Я также попытался поймать нормальное ключевое событие (не нажав ctrl-Key) и создать событие клавиатуры с JS, где клавиша Enter нажата вместе с ctrl. Но это не работает...

Он должен работать только в Webkit/Safari...

ОТВЕТЫ

Ответ 1

Чтобы решить вашу проблему, всегда сохраняйте элемент br в качестве последнего элемента вашего contenteditable div. Это обеспечит предсказуемое поведение при вводе элемента br и стандарте браузера для ввода элементов div. Вы можете проверить lastChild на клавиатуре и мыши, чтобы убедиться, что это элемент br. Предполагая, что у вас есть документ вроде:

<div id="editable" contenteditable="true"></div>

Вы можете использовать следующий JavaScript (w/jQuery 1.4+), чтобы сохранить элемент br в качестве последнего элемента и вставить элемент br вместо div div:

$(function(){

  $("#editable")

    // make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
      }
    })

    // use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

});

Протестировано на Apple OS X с Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Попробуйте использовать ierange, чтобы заставить это работать в Windows Internet Explorer.

Ответ 2

Я бы привязал функцию к событию keyup для удаления и изменения на использование regEx. Поэтому, даже если это создает странную разметку, она будет исправлена.

Использование jQuery:

$('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});