Merhabalar,

Bir text editör yapmak istiyorum. Fakat daha baştan aşamadığım bir kaç problem baş gösterdi. Resimdeki gibi bir arayüz oluşturdum. Turkuvaz bölümde bir textarea yok onun yerine bir p tagi ekledim ve contenteditable="true" değerini verdim. Daha sonra p tagindeki veriyi bir textarea'ya aktararak oradan veritabanına aktarmayı düşündüm. Fakat inanılmaz sorunlar mevcut. Bir kere p tagi içinde her enter'a bastığımda <br> eklemesini istiyorum ki bunu yapıyor zaten ama kendi kendine bir div oluşturuyor ve textareaya gelen çıktı şunun gibi oluyor;

deneme1<div>deneme2</div><div>deneme3</div><div><br></div>

Her enterda divler de eklendiğinden br taglerinin de kafası karışıyor saçma sapan bir şey çıkıyor ortaya.

Bir diğer sorun. Alıntı için bir buton var ve tıklandığında bir blockquote tagi açıyor. Bunun içindeyken entera basarsam tekrar tekrar blockquote tagi açmaya devam ediyor. Aslında sorun her yerde entera basıldığında ortaya çıkıyor. Konu hakkında yardımcı olabilecek var mı? Ya da tamamen yanlış bir yoldan mı gidiyorum? Yol gösterebilecek var mı?



Kodlar bu şekilde;

// Selecters

let editor = document.querySelector(".editor");
let addQuoteBtn = document.querySelector(".fa-quote-right");
let textArea = document.querySelector("#text");
let demo = document.querySelector(".demo");

function addQuote() {
const newQuote = document.createElement("blockquote");
newQuote.classList.add("minimize");
textArea.appendChild(newQuote);
}


function openPreview() {
const preview = document.createElement("textarea");
editor.appendChild(preview);
preview.innerHTML = textArea.innerHTML;
}