Dodaj tylko do linebreak do textContent lub innerText - w Chrome

Question

To jest skomplikowane! Pracuję z contentEditable w Chrome i mam problem z topieniem głowy. Kiedy naciśnie klawisz powrotu, Chrome wstawia nowy div do innerHTML. To jest piękne i eleganckie. Problem polega na tym, że linii podziału nie można nigdzie znaleźć w treści tekstowej div. Naprawdę potrzebuję wymyślić sposób, aby dodać podział wiersza do textContent w tym samym miejscu co div div w innerHTML.

Jakieś pomysły?

UPDATE:

mogę używać innerText ale podziały wierszy, które są tam po załadowaniu strony są ignorowane. Potrzebuję spójności jednej z tych metod. Innymi słowy, potrzebuję textContent, aby pokazać nowo wstawione podziały wierszy lub innerText, aby pokazać podziały wierszy, które istniały podczas ładowania strony.

Oto zaktualizowana demo:

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

mam rozwiązać ten ładując inną zmienną do każdej sytuacji:

Na stronie obciążenia, używam textContent który utrzymuje podziały wiersza nienaruszone. Kiedy użytkownik zaczyna pisać, używam innerText, który rozpoznaje wstawione podziały strony. Proste instrukcje if wykonają lewę!

Answer 2

To dlatego textContent nie jest świadomy styl. W rezultacie np. Wyświetla ukrytą zawartość.

Zmień c1.textContent na c1.innerText i wyświetli podział wiersza.