Contenteditable İçinde Enter Tuşuna Basılınca <div> Tagini Atmasını Engellemek

Contenteditable Div İçerisinde Enter Tuşu Davranışı

Contenteditable div içerisinde ENTER new-line atma işlemini <div> elemanı atarak yapmaktadır.
Bunun nedeni Contenteditable içerisinde div elemanları display:block; olarak ayarlı olması ve yeni satır atıldığı görüntüsünü vermesidir.

Ancak bu sizin yazmış olduğunuz metinlerin şişmesine neden olmaktadır.

Bunu gidermenin bazı alternatif yollarını bu yazımda anlatacağım.

1-Php tarafında bu div lerden kurtulmak pek tabi mümkün.

 $a=preg_replace ("/</*div (.*?) >/","",$a);
 

2-Kavascirpt ile client tarafında yapmak:

 document.execCommand ("insertHTML",false,"<br><br>"); //iki tane br :bir enter iki kere satır atar çok iyi değil. <br>. br nokta da çalışır ama noktalar gereksiz

3- Yine javascirpt ile client tarafında yapmak:
Ancak bu defa görünmeyen bir karakterden yararlanacağız sonra php tarafında o karakteri yok edeceğiz.
&zwnj; ifadesi sıfır uzunlukta görünmeyen bir karakterdir. Görünmeyen olduğu için php tarafında bu eklediğimiz görünmeyen karakteri silerken yine görünmeyen halini kullanmamız şart. Yoksa işin içinden çıkamazsınız.

Client tarafında görünemeyen karakteri ekliyorum ve new line başarılı bir şekilde çalışır.

 $ ('div[contenteditable]') .keydown (function (e) {
 	if (e.keyCode === 13) {
 		document.execCommand ("insertHTML",false,"<br>&zwnj;");
 		return false;
 	}
 });
 

Daha sonra php tarafında &zwnj; kodları yok edilecek. Ancak veritabanına da görünmez bir karakter olarak gireceğinden dolayı UTF-8 halini yani görünmeyen halindeki karakteri yok etmeniz gerekli. &zwnj; bunu yok etmeye çalışırsanız yok edemezsiniz. Çünkü veritabanına &zwnj; böyle girmedi bilakis görünmeyen bir ucube olarak girdi.

Notepad++ da ansi hali şu şekilde:
$a=preg_replace ("/‌/","",$a); bu ifadeyi direk kullanmayın.
Ansi modunda notepad++ a yapışıtırın daha sonra Encodin>Utf8 bomsuza çevirin. Sonra o oluşan kodu php tarafında kullanın.

Eğer < ve > işratlerini de daha yazarken &lt; ve &gt; ifadelerine dönüştürülmesini istiyorsanız daha kapsamlı bir kod bloğu:

 $ ('div[contenteditable]') .keydown (function (e) {
 	 if (e.keyCode === 13) {
 		 document.execCommand ("insertHTML",false,"<br>&zwnj;");
 		 return false;
 	 }
 	 else if (e.keyCode === 226) {
 		if (!e.shiftKey)
  document.execCommand ('insertHTML', false, '&lt;');
 		else if (e.shiftKey)
  document.execCommand ('insertHTML', false, '&gt;');
 	 return false;
 	 }
 });