vinnizworld
9/13/2012 - 11:57 AM

Programming Editor

Programming Editor

gistfile1.php
content_copyfile_download
<?php

	$code = '';
	// Add Content to code.txt
	if(isset($_POST['code'])){
		$code = $_POST['code']; file_put_contents('code.txt', stripslashes($code)); }

	// Just Reset the page
	if(isset($_GET['r'])){
		file_put_contents('code.txt', '');
		header('Location: .');
		exit();
	}

	// Out put Page
	if(isset($_GET['p'])){
		if(file_exists('code.txt') && is_writable('code.txt')){
			include 'code.txt';
		}
		else{
			$path = pathinfo(__FILE__);
			echo "Create a writable file <b>code.txt</b> in '{$path['dirname']}' directory";
		}
		exit();
	}

?><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Programming Editors</title>
	<style type="text/css">
		body{overflow:hidden;margin:0}
		header{background-color: #25547b; background-image:-webkit-linear-gradient(top,#03416a48%,#25547b74%,#03416a42%);height:50px;-moz-box-shadow:0 0 5px #333;-webkit-box-shadow:0 0 5px #333;-o-box-shadow:0 0 5px #333;box-shadow:0 0 5px #333}
		header #logo{font-size:2em;font-weight:700;color:#FFF;font-style:italic;font-family:Halvatica;margin-left:20px}
		#main{position:absolute;height:94%;width:100%; min-height: 300px;}
		#editor,#processed{display:block;height:50%}
		#editor textarea,#editor form{height:100%}
		.controls{position:absolute;right:50px}
		#editor textarea{width:100%;font-family:consolas,monaco,'courier new', serif;font-size:15px;
		outline:none;padding-top:5px;border:5px solid #550505;-webkit-box-sizing:border-box;
		box-shadow:0 0 4px #201F1F;resize:none;background:#eee;color:#5E0303; tab-size: 3;}
		#editor textarea::-webkit-scrollbar{height:12px;width:12px}
		#editor textarea::-webkit-scrollbar:hover{background-color:#B3A4A4}
		#editor textarea::-webkit-scrollbar-thumb{background:#615252;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07)}
		#editor{background-color:#eee}
		#processed iframe{width:100%;height:100%;border:10px solid #eee;-webkit-box-sizing:border-box}
		input[type=submit]{margin:4px}
	</style>

	</head>
<body>	
	<header><div id="logo">editor</div></header>	
	<div id="main">
		<div id="editor">
			<form action="" method="post">
				<textarea clss="html" name="code" id="code" cols="140" rows="10"><?php echo stripslashes($code); ?></textarea>
				<div class="controls">
					<input type="submit" id="btn" value="Process"><a href="?p">Processed</a>
				</div>
		    </form>
		</div>

		<div id="processed">
			<iframe id="frame" src="?p" frameborder="0"></iframe>
			<div class="live"></div>
		</div>
	</div>

	<script type="text/javascript">

		var code = document.getElementById('code'),
		form = document.forms[0];
		fr = document.getElementById('frame');
		var ajax = function(h,b,c){var e=Object.prototype.toString,a,d="",f="[object Function]"===e.call(b)?"GET":"POST",c="[object Function]"===e.call(c)?c:!1;a=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");a.onreadystatechange=function(){4<=a.readyState&&200==a.status&&("POST"===f?c&&c(a.responseText):b(a.responseText))};if("POST"==f&&"[object Object]"===e.call(b)){for(var g in b)d+=g+"="+encodeURIComponent(b[g])+"&";d=d.slice(0,-1)}a.open(f,h,!0);a.setRequestHeader("Content-type","application/x-www-form-urlencoded");a.send(d)}

		form.addEventListener('submit',function(e){
			ajax('',{ code: code.value },function(){ fr.src = '?p';	});
			e.preventDefault();
		});

		code.addEventListener('keyup',function(e){ if(e.keyCode === 13 && e.ctrlKey){ e.preventDefault(); form.submit(); } });

	</script>

	<script type="text/javascript" src="http://zen-coding.ru/textarea/zen_textarea.min.js" ></script>
	<script type="text/javascript">zen_textarea.setup({pretty_break: true, use_tab: true});</script>
</body>
</html>