Live HTML, CSS, JS, XML, PHP Code Editor / Tester

arp14 CSS, HTML, JavaScript, PHP, Tutorial, XML Tags: , , , , , , , , , , , 7

Hi everyone,

In this post, I am going to show you how to build a browser based Side-to-Side Code-View Live HTML, CSS, JavaScript, XML, PHP Code Editor for your own. I made this application for code testing purpose and yes – it’s from scratch. You can write the code at left side and view the result at right side. You can use HTML, CSS, JavaScript (jQuery wil work also), XML and PHP. After write your codes at left side, you must press submit button to view result. You can also hit CTRL + Enter key on keyboard to submit the form. The finished version will be look like this –

Live HTML, CSS, JS, XML, PHP Code Editor / Tester
Click to view full size

How this Code Editor / Tester works?

This code editor is made using HTML, CSS, JavaScript. At first, I made this for my own – to test my codes as quickly as possible. There was no code syntax highlighting options available. But now I added CodeMirror to it. CodeMirror is a code-editor component that can be embedded in Web pages.

This code editor simply grab the text within a textarea, process it and then saves it in a file. After that it fetches that file generated previously and showing it in a iframe. This is a very handy live code editor or you can say code tester.

Showing line numbers, undo, redo, tab, CTRL+Enter submit, auto brackets completetion and more features are available in it.

Collect the files below, download CodeMirror Library from their website, edit paths of CodeMirror files within these files. Congratulations! Now you can run this code editor on your local machine / server.

Required Files

Code Editor.php

<?php 
	error_reporting(0);
	$code = $_POST['code'];
	$code_e = $code;
	$file = "doc.php";
	$msg = "";
	// write file
	if ($handle = fopen($file, 'w')) {
	$file_content = $code;
	fwrite($handle, $file_content);
	fclose($handle);
	} else $msg = "<br />writing failed<br />";
?>
<html>
    <head>
		<title>Live HTML, CSS, JS, XML, PHP Code Editor / Tester - w3epic.com</title>
		<script src="codemirror-3.1/lib/codemirror.js"></script>

		<script src="codemirror-3.1/mode/xml/xml.js"></script>
		<script src="codemirror-3.1/mode/javascript/javascript.js"></script>
		<script src="codemirror-3.1/mode/css/css.js"></script>
		<script src="codemirror-3.1/mode/php/php.js"></script>
		<script src="codemirror-3.1/mode/htmlmixed/htmlmixed.js"></script>

		<script src="codemirror-3.1/addon/edit/closebrackets.js"></script>

		<link rel="stylesheet" href="codemirror-3.1/lib/codemirror.css">
		<!--<link rel="stylesheet" href="codemirror-3.1//theme/eclipse.css">-->
		<link rel="stylesheet" href="style.css">
		<script src="script.js"></script>
	</head>
    <body>
		<div id="div1">
			<span><b>Live Code Editor : </b>Write your code and press ctrl+enter or Submit button!</span>
			<form action="code_editor.php" method="post" id="editor_form">
				<textarea name="code" id="editor" class="codeMirror"><?=$code_e?></textarea><br />
				<input type="submit" name="submit" value="Submit" id="submit"/>
			</form>
			<hr /><center><span>Live HTML, CSS, JS, XML, PHP Code Editor / Tester by Arpan Das © <?=date("Y")?> w3epic.com</span></center>
		</div>
		<div id="div2">
			<iframe src="doc.php"></iframe>
		</div>
    </body>
</html>

Script.js

window.onload = function () {
	// SUBMIT FORM BY CTRL+ENTER
	document.getElementById("editor_form").onkeydown = function (e) {
		if (e.keyCode == 13 && e.ctrlKey) document.getElementById("submit").click();
		if (e.keyCode == 9) {
			document.getElementById("editor_form").focus();
			return false;
		}
	}

	// Initialize CodeMirror editor
	var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
		mode: 'application/x-httpd-php',
		tabMode: 'indent',
		lineNumbers: true,
		lineWrapping: true,
		matchBrackets: true,
		autoCloseBrackets: true,
		parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",
                     "codemirror-3.1/extra/tokenizephp.js", "codemirror-3.1/extra/parsephp.js",
                     "codemirror-3.1/extra/parsephphtmlmixed.js"],
        stylesheet: ["codemirror-3.1/extra/xmlcolors.css", "codemirror-3.1/extra/jscolors.css", 
					 "codemirror-3.1/extra/csscolors.css", "codemirror-3.1/extra/phpcolors.css"],
        path: "codemirror-3.1/extra/js/",
		continuousScanning: 500
	});

	// making equal height coulmns
	document.getElementById('div1').style.height = document.body.clientHeight + 'px';
	document.getElementById('div2').style.height = document.body.clientHeight + 'px';
	document.getElementsByTagName('iframe')[0].style.height = document.body.clientHeight + 'px';

	document.getElementsByClassName('CodeMirror-scroll')[0].style.height = document.body.clientHeight - 100 + 'px';
}

Style.css

body {margin: 0; padding: 0; font-family: arial; font-size: 12px;}
#div1 {background: #ddd; width: 49%; float: left; padding: .5%; position: fixed;;}
#div2 {background: #fff; width: 49%; float: right; padding: .5%;}
textarea {width: 99%; height: 650px; background: #eee; border: 2px solid #aaa; font-family: consolas; color: royalblue;}
input#submit {width: 100%;}
iframe {width: 100%; border: 2px solid #aaa; margin: -10px; padding: 0;}

.CodeMirror {
&nbsp; /* Set height, width, borders, and global font properties here */
&nbsp; font-family: consolas;
&nbsp; font-size: 12px;
&nbsp; height: auto;
&nbsp; border: 1px solid #eee;
&nbsp; background: #fff;
}

Please Download rest of the files from CodeMirror.net and be sure about paths of CodeMirror files.

If you have any problem, please comment below – I will be back to you.

Thank you!

7 thoughts on “Live HTML, CSS, JS, XML, PHP Code Editor / Tester

Leave a Reply

Note: Your email address will not be published. Required fields are marked *