How to Create Live HTML Editor using JQuery

Live HTML Editor using JQuery

Here we are attaching Simple JQyery example about, How to Create Live HTML Editor using JQuery. The output has been shared in the same post.

Script Code

function preview(obj) {
			
	$('#previewBox').html(obj.value);
}

Final Example

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How to Create Live HTML Editor
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	
	<h1>Live HTML Editor using JQuery</h1>
	
	<table border="2">
		<tr>
			<th><h2>Code</h2></th>
			<th><h2>Preview</h2></th>
		</tr>
		<tr>
			<td>
				<div style="height:100%;width:100%;">
					<textarea cols="60" rows="20" oninput="preview(this);" placeholder="Enter your HTML Code"></textarea>
				</div>
			</td>
			<td>
				<div style="width:650px;overflow:auto;">
					<div id="previewBox"></div>
				</div>
			</td>
		</tr>
	
	</table>

	<script>
	
		function preview(obj) {
			
			$('#previewBox').html(obj.value);
		}
	
	</script>
	
</body>
</html>

Output

Live HTML Editor using JQuery

Hello, folks, I am a founder of dineshkrish.com. I love Java and Open source technologies, If you find my tutorials are useful, please consider making donations to these charities.