Agregue linebreak a textContent o innerText solamente - en Chrome

Question

¡Esto es complicado! Estoy trabajando con contenido Editable en Chrome y estoy experimentando un problema de fusión de cabeza. Cuando presiono la tecla de retorno, Chrome inserta un nuevo div en el innerHTML. Esto está bien y elegante. El problema es que el salto de línea no se encuentra en el contenido de texto de div. Realmente necesito encontrar una manera de agregar el salto de línea al contenido de texto en el mismo lugar que el div break en el innerHTML.

alguna idea?

ACTUALIZACIÓN:

puedo usar innerText pero luego los saltos de línea que están allí cuando se ignoran las cargas de la página. Necesito coherencia en uno de estos métodos. En otras palabras, necesito textContent para mostrar los saltos de línea recién ingresados ​​o innerText para mostrar los saltos de línea que existían en la carga de la página.

He aquí un demo de actualización:

function checkit() { 
 
    var c1 = document.getElementById('c1') 
 
    alert("TEXTCONTENT:\n" + c1.textContent + "\n\nINNERTEXT:\n" + c1.innerText + "\n\nINNERHTML:\n" + c1.innerHTML) 
 
}

div {padding: 20px; border-bottom: 1px solid #CCC;}

<div><a href="#" onclick="checkit()">check it</a></div> 
 

 
<div contentEditable="true" id="c1">click inside this <b>div</b>, 
 
press return and then press <b>check it</b> above</div>

Answer 1

he resuelto esto cargando una variable diferente para cada situación:

al cargar la página, utilizo textContent que mantiene intactos los saltos de línea. Cuando el usuario comienza a escribir, utilizo innerText que reconoce los saltos de página insertados. ¡Una simple declaración if hará el truco!

Answer 2

Esto se debe a textContent no es consciente de estilo. Como resultado, por ejemplo, muestra contenido oculto.

Cambie c1.textContent a c1.innerText y se mostrará el salto de línea.