Codenstuff.com

Posted: **Sat Sep 07, 2013 5:25 am**

In Action - http://jsbin.com/UjANEze/1

Screenshot:

html-editor-width-preview.png

This HTML Editor with Preview is just for experimentation, and fast debugging but the css can overwrite original css and javascript on page. If you want a more sophisticated editor you can use CodeMirror.

How This Works!:
First goal is for cross platform compatibility with a good looking UI. So I went with JQuery Mobile so the UI is appropriate for mobile users as well. Second content box along with editor and preview had to be fixed to fit the users height of the page. Third was navigation being able to import files locally on the users computer without a server, save the same way, reload app, and clear editor code value (this can be easily modified to add in code generators). A little CSS for additional styling, and then some more scripting; then BAM! A HTML Editor with Live Preview!

This editor will also allow you to use the tab button for indentations. So go through the code, experiment, and have fun.

If you want one a bit more stylish with added features, but not quite sophisticated as CodeMirror you can give the lite version of the HTML OnLive Debugger a try, source code is available on my post here - http://codenstuff.com/forum/viewtopic.php?f=166&t=10671

Full Code:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>Simple Example HTML Editor with Preview</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type="text/css">
body, .content {overflow: hidden;}
   
textarea#editor {
   display: block;
   margin: 0px;
   padding: .5em;
   width: 100%;
   height: 100%;
   border: 0px;
   font-family: monospace;
   line-height: 1;
   min-height: 1.4em;
   line-height: 1.4em;
   font-size: 1em;
   border-radius: 0px;
   resize: none;
   outline: none;
   background-color: #1c1c1c;
   color: #a9a9a9;
   box-shadow: 0em 0em 0em #000, inset 0em 0em 1em #000;
   text-shadow: .125em .125em .5em #000;}
   
::-webkit-input-placeholder { /* WebKit browsers */
   color: #666;}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #666;}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #666;}
    
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: #666;}
   
iframe#preview {
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #fff;}
   
.content .ui-grid-a {
   display: inline-block;
   width: 100%;
   height: 100%;
   overflow: auto;}
   
.content .ui-block-a {
   display: inline-block;
   width: 50%;
   height: 100%;
   overflow: auto;}
   
.content .ui-block-b {
   display: inline-block;
   width: 50%;
   height: 100%;
   overflow: hidden;}
	
#gentags {
	margin-top: -.4em;
	display: inline-block;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;}
	
#gentags div {
	width: 100%;
	overflow: hidden;}
	
#gentags table {
	width: 100%;}

#head1 {
  overflow: hidden;}
</style>
<script type="text/javascript">
$(function() {
   var fixgeometry = function() {
     /* Some orientation changes leave the scroll position at something
      * that isn't 0,0. This is annoying for user experience. */
     scroll(0, 0);

     /* Calculate the geometry that our content area should take */
     var header = $(".header:visible");
     var footer = $(".footer:visible");
     var content = $(".content:visible");
     var viewport_height = $(window).height();
     
     var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
     
     /* Trim margin/border/padding height */
     content_height -= (content.outerHeight() - content.height());
     content.height(content_height);
   }; /* fixgeometry */

   $(document).ready(function() {
      $(window).bind("orientationchange resize pageshow", fixgeometry);
   });
   
	// Using the <TAB>
	$('#editor').keydown(function(e) {
		if(e.keyCode == 9) {
			var start = $(this).get(0).selectionStart;
			$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
			$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
			return false;
		}
	});
	
	// Trigger App Reload
	$("#restartapp").click(function() {
		location.reload(true);
	});
	
	// Trigger Clear Editor Value
	$("#cleardoc").click(function() {
		$("#editor").val("");
		preview.contents().find('body').html(editor.val());
	});
	
	// Trigger LoadFile DIV TO Load File
	$("#openload").click(function() {
		$("#loadfile").trigger('click');
	});
	
	// Load File into Editor
	if (window.File && window.FileReader && window.FileList && window.Blob) {
		var LoadFile = function(input) {
			var reader = new FileReader();
				reader.onload = function(e) {
					var content = e.target.result;
					editor.val(content);
				};
			reader.readAsText(input[0]);
		}
		
		try {
			$('#loadfile').on('change', function() {
				LoadFile(this.files);
				preview.contents().find('body').html(editor.val());
			});
		}
		catch(event) {
			alert("Oops there's been an error.");
		}
	} else {
		alert('The File APIs are not fully supported in this browser.');
	}
   
   var editor = $('#editor'),
		preview = $("[ID$=preview]");

	// Live Keyup Editor
	editor.keyup(function(e) {
		preview.contents().find('body').html(editor.val());
	});
});

// Save Coded Document
function saveTextAsFile() {
	var textToWrite = document.getElementById("editor").value;
	var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
	var fileNameToSaveAs = "myfile.html";

	var downloadLink = document.createElement("a");
	downloadLink.download = fileNameToSaveAs;
	downloadLink.innerHTML = "Download File";
	if (window.webkitURL != null)
	{
		// Chrome allows the link to be clicked
		// without actually adding it to the DOM.
		downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
	}
	else
	{
		// Firefox requires the link to be added to the DOM
		// before it can be clicked.
		downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
		downloadLink.onclick = destroyClickedElement;
		downloadLink.style.display = "none";
		document.body.appendChild(downloadLink);
	}

	downloadLink.click();
}

function destroyClickedElement(event)
{
	document.body.removeChild(event.target);
}
</script>
</head>
<body>
<div data-role='page'>
	<div class="header" id="head1" data-role='header'>
		<div id="gentags" class="ui-btn-left">
			<div>
				<table>
					<tr>
						<td><a id="openload" data-role="button" data-inline="true" data-mini="true">Browse</a></td>
						<td><a data-role="button" data-inline="true" data-mini="true" onclick='saveTextAsFile()'>Save</a></td>
						<td><a id="restartapp" data-role="button" data-inline="true" data-mini="true">Reload</a></td>
						<td><a id="cleardoc" data-role="button" data-inline="true" data-mini="true">Clear</a></td>
					</tr>
				</table>
			</div>
		</div>
		<h1 style="visibility:hidden;">Simple Example HTML Editor with Preview</h1>
		
	</div>
	
	<div class='content' data-role='content' data-theme="a">
		<div class="openload" style="width: 0px; height: 0px; visibility: hidden;">
			<input id="loadfile" data-role="button" data-inline="true" data-mini="true" type="file">
			<p></p>
		</div>
		
		<div class="ui-block-a">
			<textarea id="editor" placeholder="Input code here..."></textarea>
		</div>
		
		<div class="ui-block-b">
			<iframe id="preview" width="100%" height="100%" frameborder="0" src="about:blank"></iframe>
		</div>
	</div>
</div>
</body>
</html>

Here's the code seen in the screenshot:

Code: Select all

<style type='text/css'>
div#bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	background: #7abcff; /* Old browsers */
 	background: -moz-radial-gradient(center, ellipse cover,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

#bg h1 {
	cursor:default;
	font: bold 2.5em Arial, sans-serif;
	text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;}
</style>

<div id='bg' align='center'>
	<h1>HTML Editor with Live Preview</h1>
</div>