Konwersja tekstu na HTML - przejście do nowej linii

Question

Pracuję nad swoistym edytorem tekstu w przeglądarce. Mój cel to pozwolić wpisywać tekst w jednym, edytowalnym divie i nadawać mu formatowanie przy pomocy odpowiednich przycisków (przykład zawiera przycisk od pogrubiania "Bold"). Inny przycisk ma sprawić, by wpisany tekst został przerobiony w taki sposób, by wprowadzone formatowania zostały przedstawione w formie HTML (czyli jak pogrubimy część tekstu, to ta cześć będzie między <b></b>). Taka wersja ma pojawić się w divie niżej. Obecnie doszedłem do czegoś takiego: Click! Niestety, jeżeli dodam tekst w nowej linii przy pomocy Entera, to zostaje on wstawiony miedzy tagi <div></div>, a na końcu ma jeszcze tag <br>. Dodatkowo jest napisany w tej samej linii, co tekst poprzedni, a nie w nowej jak to powinno być. Próbowałem coś z tym zrobić przy pomocy replace(), ale bez większego skutku. 

Czy ktoś mógłby mi doradzić, z której strony mam to ugryźć, żeby otrzymać spodziewany efekt? Zaznaczam tylko, że chciałbym to zrobić przy pomocy czystego javascripta, a nie jquery.

Comments

Będąc przy temacie wysiwygów: ContentEditable — The Good, the Bad and the Ugly - dobry artykuł

---

Trochę posmutniałem na wieść, że div z ContentEditable to nie jest najlepsze rozwiązanie. Ale i tak dzięki!

---

Jest, po prostu stworzenie rozbudowanego edytora to trudne zadanie.

Answer 1

wstawiony miedzy tagi <div></div>, a na końcu ma jeszcze tag <br>

<div>,  <br> - wywal to w kosmos regexem

</div> zamień na \n

Do .codeArea dodaj white-space: pre, żeby 'poprawnie' wyświetlać \n

Answer 2

Coś takiego?

function makeCode() {
  var write = document.querySelector(".write");
  var divInsideWrite = write.querySelector('div');
  
  if (divInsideWrite) {
    var newLineTag = document.createElement('br');
    write.insertBefore(newLineTag, divInsideWrite);
    divInsideWrite.outerHTML = divInsideWrite.innerHTML;
  }
  document.querySelector(".codeArea").textContent = write.innerHTML;
}

Sprawdzasz czy <div class="write"> zawiera w sobie innego diva (zmienna divInsideWrite). Jeśli tak,to tworzysz element <br> i umieszczasz go przed divInsideWrite. Następnie podmieniasz całego divInsideWrite tylko jego zawartością (czyli "kasujesz" tag <div> zostawiając tylko jego wewnętrzny kod HTML). Na końcu jako textContent (czyli wyświetlasz kod HTML w postaci "oryginalnej") umieszczasz zawartość <div class="write">

Zauważ, że zastosowanie textContent zamiast innerHTML powoduje ignorowanie semantycznego znaczenia danego tagu - cały element wypisze się w formie tekstowej.