Сделать <br> вместо <div></div>, нажав Enter на contenteditable

Question

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

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

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

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

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

Answer 1

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

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

Вы можете использовать следующий JavaScript (ж/JQuery 1.4+), чтобы сохранить бры элемента в качестве последнего элемента и придать бры элемента вместо сНа 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.

Answer 2

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

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

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