There are a lot of HTML editing services in the Web. Some of the popular services are JsFiddle and JsBin. These sites offer saving function to your account too. If you want to create a site like JSFiddle, then you are at the right place. I’m going to tell you how to create a basic HTML editing software using jQuery.
The editor we’re going to create also has a live preview service which means that the user don’t have to submit the code form every time. The preview is automatically updated using jQuery‘s keyup trigger except for **JS **code update, because Javascript can’t be added every time when user types something because there will be syntax errors.
First, we create the text editor layout which have a table containing HTML codes, CSS codes, JS codes and textareas. Here is the full HTML code of layout (We’re also adding the jQuery library) :
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="htmleditor.js"></script>
<table>
<tbody>
<tr>
<td>
<h2>HTML</h2>
<textarea class="codes" id="html" placeholder="Your HTML Code HERE"></textarea>
</td>
<td>
<h2>CSS</h2>
<textarea class="codes" id="css" placeholder="Your CSS Code HERE"></textarea>
</td>
</tr>
<tr>
<td>
<h2>JS</h2>
<textarea class="codes" id="js" placeholder="Your JavaScript Code HERE"></textarea>
</td>
<td>
<h2>Preview</h2>
<iframe id="preview" src="javascript:;"></iframe>
</td>
</tr>
<tr>
<td>
<div style="text-align:right;"><input id="upjs" type="button" value="Update And Run JS"/></div>
</td>
</tr>
</tbody>
</table>
<style>
.codes,#preview{
width: 320px;
height: 135px;
border:2px dashed white;
background:white;
color:black;
overflow:auto;
}
</style>htmleditor.js
$(document).ready(function(){
var p=$("#preview").contents().find("body");
p.css("margin","2px");
p.html('<span id="subinsbdotcomhtmlpr"></span><style id="subinsbdotcomcsspr"></style>');
$("#html").on('keyup',function(){
p.find("#subinsbdotcomhtmlpr").html($(this).val());
});
$("#css").on('keyup',function(){
p.find("#subinsbdotcomcsspr").html($(this).val());
});
$("#js").on('change',function(){
p.find("#subinsbdotcomjspr").remove();
p.append('<script id="subinsbdotcomjspr">'+$(this).val()+'</script>');
});
$("#upjs").on('click',function(){
p.find("#subinsbdotcomjspr").remove();
p.append('<script id="subinsbdotcomjspr">'+$("#js").val()+'</script>');
});
});The jQuery code is too less. The jQuery code is only binding some keyup functions and appending HTML code to the preview iframe. If you have any problems / feedback / suggestions write it on the comments. I’m here 10/7.