Bir contenteditable üzerinde Enter tuşuna basarak <div></div> yerine <br> yapın

Question

Enter tuşuna basıldığında bir <br> eklemek için klavye olay işleyicimde bir miktar kod yazdım:

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

Bu yalnızca imleç iki harf arasındaysa, Sonunda iki <br> -Elements'e ihtiyacım var. Bir Hattın sonunda mıyım? Ya da Enter problemi için başka bir çalışma fikri?

Ayrıca normal anahtar olayını yakalamaya çalıştım (ctrl-Tuşunu basılı tutarak wothout) ve Enter tuşu Ctrl ile birlikte basıldığında JS ile bir klavye olayı yarattım. Ama bu doz işe yaramaz…

Sadece Webkit/Safari'de Çalışmak zorunda…

Answer 1

, her zaman contenteditable div son öğe olarak bir br elemanı tutun. Bu, br elemanın enjekte edilmesi sırasında tarayıcı öğelerinin enjekte edilmesi sırasına göre tahmin edilebilir davranışlar sağlayacaktır. Bir br eleman olduğundan emin olmak için lastChild anahtarlamada ve mouseup'da kontrol edebilirsiniz.

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

Geçen öğe olarak br elemanı tutmak ve yerine div div bir br elemanı enjekte etmek (/ jQuery 1.4+ w) Aşağıdaki JavaScript kullanabilirsiniz:

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

}); 

varsayarsak gibi bir belge var

Apple OS X w/Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5) üzerinde test edilmiştir. Windows Internet Explorer'da çalışmak için ierange kullanmayı deneyin.

Answer 2

Silmek için anahtar işlevine bir işlev bağladım ve regEx kullanarak
olarak değiştirin. Yani garip biçimlendirme yaratsa bile, düzeltilecek. jQuery kullanarak

: (yanlış) `range.collapse için

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