Basit Web Editörü

Anasayfa

Website kodlarken sürekli kod yazıp browserda yenileme yapıyoruz kodlarımızın çalışıp çalışmadığını görmek için.Bende 2 sayfayı birden düzenlemek için bir editör yaptım.Yazdığımız kodları anında görebiliyoruz.

Bu can sıkıntısına boş bir anımda yaptım.Çok uğraştığım söylenemez.

İndir : http://ustaderslik.com/dosya/web-edit%C3%B6r.rar

Görüntüsü :

http://ustaderslik.com/resim/ders/sygzc.png

Editörün kodları :

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>AnaSayfa</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

var kod=prompt("Düzenlenecek alan sayfa adresi.Örnek:index.php","");

var css=prompt("Css dosyasının adresi.Örnek:tasarım.css Yoksa boş bırakın.","");



$(function(){



if(kod==""){ $("#kod").attr("disabled","disabled"); }

if(css==""){ $("#css").hide(); $("#kod").css("width","1000px") }



	$(".kyazi").text(kod);

	$(".cyazi").text(css);

	$("#iframe").attr("src",kod);

	setTimeout("yaz()",500);

});



</script>

<style type="text/css">

body{background-color:#000; font-size:20px;color:#6bf6ff;font-family:Palatino; }



.ana{width:1000px;height:620px;margin:auto;position:relative; }



.iframe{width:1000px; height:375px;background-color:#fff; position:absolute;top:0px;left:0px;border:1px solid #333;  box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

.kod{width:490px; height:220px;color:#3cff00;background-color:#333;position:absolute;bottom:0px;left:0px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

.css{width:490px; height:220px;color:#3cff00;background-color:#333;position:absolute;bottom:0px;right:0px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }



.kyazi{position:absolute;left:0px;bottom:220px;}

.cyazi{position:absolute;right:440px;bottom:220px;}



textarea{font-family:Palatino;font-size:18px;}



</style>

</head>

<body>



<div class="ana">

	<div class="if"><iframe id="iframe" class="iframe" frameborder="0"></iframe></div>

	<textarea id="kod" class="kod"></textarea>

	<textarea id="css" class="css"></textarea>

	

	<div class="kyazi"></div>

	<div class="cyazi"></div>

</div>



<script type="text/javascript">

function yaz(){

$(function(){

	$.post("veri.php",{"islem":"cek","sayfa":kod},function(veri){ $("#kod").val(veri)  });

	$.post("veri.php",{"islem":"cek","sayfa":css},function(veri){ $("#css").val(veri)  });

}); }



	$("#kod").keyup(function(){

		var veri=$("#kod").val(); 

		$.post("veri.php",{"islem":"yaz","sayfa":kod,"veri":veri},function(){

		$("#iframe").removeAttr("src");

		$("#iframe").attr("src",kod);

		});

	});

	

	$("#css").keyup(function(){

		var veri2=$("#css").val();

		$.post("veri.php",{"islem":"yaz","sayfa":css,"veri":veri2},function(){

		$(".if").html('<iframe src="'+kod+'" id="iframe" class="iframe" frameborder="0"></iframe>');

		});

	});

	



</script>





</body>

</html>

Basit Web Editörü

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik