Contenteditable Div İmleç Sorunu

Merhaba arkadaşlar.
Contenteditable div'de imleci içeriğin hep sonuna gelmesini nasıl sağlarız? Bazı sitelerde ingilizce bir şeyler anlatışmış ama anlayamadım.

Sorun şu. Bir resim seçtik ve ondan sonra yazı yazmak istiyoruz. Yazmaya başlayınca resimden sonra değil önce yazıyor.

Js

$('#Resim').find('img').click(function(){
  var emoji   = $(this).attr('src');
  var html    = '<img class="emoji" src="'+emoji+'" />';
  
  $('.Kutu').append(html);
});

function getContent(){
  var content = $('.Kutu').html();
  $('textarea[name=kutu_icerik]').html(content);
 
  if(content == ''){
    return false;
  }
}

Html

<!DOCTYPE html>
<html >
  <head>
	<link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title>Anasayfa</title>
  </head>
  <body>
  
	<form action="" method="post" onSubmit="return getContent()">
		<textarea name="kutu_icerik"></textarea>
		<div class="Kutu" contenteditable="true"></div>
		<button type="submit">Gönder</button>
	</form>

	<div id="Resim">
	   <img src="smile_1.png" data-emoji=":)">
	   <img src="smile_2.png" data-emoji=":(">
	   <img src="smile_3.png" data-emoji=";)">
	</div>
   <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
   <script src="js/index.js"></script>
		
	<?php
		if ($_POST) {
		  echo '<div class="Veri">';
			$cek = @$_POST["kutu_icerik"];
			echo $cek."<br>";
		  echo '</div>';
		}
	?>
		
  </body>
</html>

Css

img {
  width: 30px;
  cursor: pointer;
}
.Kutu {
  width: 430px;
  min-height: 150px;
  max-height: 400px;
  border: 2px solid #ddd;
  margin-bottom: 10px;
  padding: 10px;
  font-family: Arial;
  overflow: auto;
  word-wrap: break-word;
  text-align: justify;
  line-height: 21px;
}

.Kutu img {
   width: 16px;
   height : 16px;
   line-height: 16px;
   vertical-align: -3px;
}
.emoji {
  width: 20px;
  line-height: 10px;
}

textarea{
  display:none;
}

#Resim {
	margin-top: 10px;
	border: 1px solid #ddd;
	padding: 10px;
	width: 430px;
}

.Veri {
	width: 430px;
	border: 1px solid #ddd;
	margin: 10px 0;
	padding: 10px;
	font-family: Arial;
	font-size: 14px;
	overflow: auto;
	word-wrap: break-word;
	text-align: justify;
	line-height: 21px;
}

.Veri img {
	display: inline-block;
	vertical-align: -5px;
}

 

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git