Building web Frame Editor
2 min readMay 21, 2023
Today let’s explore a quick demo session on building a web Editor .
- Html Stuffs =>
+> make four components ‘textarea’ containers
(Html Panel, CSS Panel , JavaScript Panel, Output Panel)
HTML …
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link href="codePannel.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header class="pannelHeader">
<h1 style="text-align:center;">WebDev Editor Pannel</h1>
</header>
<div class="editor">
<div class="flexer">
<div>
<h4>Add HTML</h4>
<textarea id="html-code" style="margin-left:21px;"></textarea>
</div>
<div>
<h4>Add CSS</h4>
<textarea id="css-code"></textarea>
</div>
<div>
<h4>Add JavaScript</h4>
<textarea id="js-code"></textarea>
</div>
</div>
<div class="outputBox" style="background-color: dodgerblue;">
<iframe id="output"></iframe>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="codePannel.js"></script>
</body>
</html>2. JavaScript Stuffs=>
+> store the content of four panels ; HTML, CSS, JS, Output using variables & document.querySelector().
+> to show output content , need Html Panel & CSS Panel code .
#do
# output.contentbody.innerhtml=html_code+css_code
+> to evaluate the logic that would be put in js panel use output.contentwindow.eval(js)
+> bind keyup event to outputGenerator()
JavaScript …
//javascript file saved as 'codePannel.js'
function outputGenerator(){
let htmlcode=document.querySelector(".editor #html-code").value;
let csscode="<style>"+document.querySelector(".editor #css-code").value+"</style>";
let jscode=document.querySelector(".editor #js-code").value;
let output=document.querySelector(".editor #output");
output.contentDocument.body.innerHTML=htmlcode+csscode;
output.contentWindow.eval(jscode);
//console.log(htmlcode,csscode,jscode,output);
}
document.querySelector(".editor #html-code").addEventListener("keyup",outputGenerator);
document.querySelector(".editor #css-code").addEventListener("keyup",outputGenerator);
document.querySelector(".editor #js-code").addEventListener("keyup",outputGenerator);CSS …
//adding style in 'codePannel.css'
.pannelHeader{
height: 100px;
background-color: black;
color: antiquewhite;
padding: 20px;
/* text-orientation: sideways; */
}
#html-code,#css-code,#js-code{
width:200px;
height:200px;
}
#output{
width:500px;
height:200px;
}
.flexer{
display:flex;
flex-direction:row;
background-color:green;
}
#output{
margin-left:74px;
background-color:white;
}
