Zrób <br> zamiast <div></div> naciskając Enter na contentEditable

Question

Napisałem kawałek kodu w moim obsługi zdarzeń klawiatury, aby wstawić <br> w odpowiedzi na naciśnięcie klawisza Enter:

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

ten działa tylko wtedy, gdy kursor znajduje się pomiędzy dwoma literami, jeśli na końcu potrzebuję dwóch <br> -elementów. Czy mogę wykryć, czy jestem na końcu linii? A może jakiś inny pomysł na Enter?

Próbowałem również złapać normalne zdarzenie kluczowe (bez klawisza Ctrl) i utworzyć wydarzenie klawiaturowe z JS, w którym wciśnięty jest klawisz Enter wraz z ctrl. Ale ta praca dosn't ...

Ma tylko do pracy w Webkit/Safari ...

Answer 1

W celu rozwiązania problemu, należy zawsze zachować br elementu jako ostatni element swojej contenteditable div. Zapewni to przewidywalne zachowanie podczas wstrzykiwania elementu br w porównaniu z domyślnym ustawieniem wstrzykiwania elementów div. Możesz sprawdzić, czy na lastChild w klawiszu i na myszy, aby upewnić się, że jest to element br. Zakładając, że mamy dokument, jak:

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

można wykorzystać następujące JavaScript (w/jQuery 1.4+), aby zachować element br jako ostatni element i wstrzyknąć element br zamiast 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; 
     } 
     } 
    }); 

}); 

Testowany w systemie Apple OS X w/Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Spróbuj użyć ierange, aby uruchomić to w Windows Internet Explorer.

Answer 2

Wiązałbym funkcję ze zdarzeniem keyup, aby usunąć i zmienić na
używając regEx. Więc nawet jeśli tworzy dziwne znaczniki, zostanie to naprawione.

jQuery:

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