Hacer un <br> en lugar de <div></div> pulsando Enter en un contenteditable

Question

He escrito un poco de código en mi controlador de eventos de teclado para insertar un <br> en respuesta a la pulsación de la tecla Enter:

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

Este solo funciona si el cursor está entre dos letras, si está al final necesito dos elementos <br>. ¿Puedo detectar si estoy al final de una línea? ¿O alguna otra idea de trabajo para el problema Enter?

También traté de coger la llave-evento normal (wothout la oprimida la tecla CTRL pulsada) y crear un teclado de evento con JS, donde la tecla ENTER se pulsa junto con el ctrl. Pero este trabajo dosn't ...

Sólo se tiene que trabajar en WebKit/Safari ...

Answer 1

Con el fin de resolver el problema, siempre mantenga un elementoancho como el último elemento de su div contenteditable. Esto asegurará un comportamiento predecible al inyectar un elemento br frente a la predeterminada del navegador de inyectar elementos div. Puede verificar el lastChild en la tecla y el mouse para asegurarse de que sea un elemento br. Asumiendo que tiene un documento como:

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

Se puede utilizar el siguiente JavaScript (w/jQuery 1.4 o superior) para mantener un elemento de ancho como el último elemento e inyectar un elemento de ancho en lugar de 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; 
     } 
     } 
    }); 

}); 

Probado en Apple OS X con Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Intente usar ierange para hacer que esto funcione en Windows Internet Explorer.

Answer 2

Me gustaría vincular una función al evento de teclado para eliminar y cambiar a
usando regEx. Entonces, incluso si crea un marcado extraño, será arreglado.

Usando jQuery:

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