www.xbdev.net
xbdev - software development
Saturday June 12, 2021
home | about | contact | Donations

     
 

HTML5 and Javascript

Example based approach ....

 

Writing Your Own Embedded Editor (JS/HTML/CSS)

by Kenwright

Search terms:

  • How to make a website like CodePen
  • How to create Live Coding Playground
  • How to create a live code editor for a website
  • How to make a web-based compiler like code pen

Introduction

Have you ever wondered how you can create your own editor and compiler in your browser using only Javascript, CSS and HTML? It’s very common today, and you’ll see lots of great websites like CodePen, Coding Playground and so on. At first, you might be wondering, it’s going to be hard! It’s going to be complex! Well you’d be wrong. It’s so simple and elegant the solution, you’ll be impressed!

All you need to do is create a single file index.html. As for this tutorial, you’ll put all your code in a single file, you can split it into separate html/css/js files later on as your project starts to grow - but here, it’s about seeing it all working together (underlying principle).

You can see what to expect (screenshot):

The steps are as follows:

  1. Create 4 tabs using standard html/css (call them HTML,CSS,JS and Output)
  2. Create 3 textareas which will be used for entering and editing the HTML/CSS/JS
  3. Create an iframe (this is used to redirect the compiled HTML/CSS/JS output to - created live on the fly when you click the output button)
  4. When the ‘Output’ tab is selected, this is where you do the real magic. You get the contents from the 3 textareas, then you write them to the iframe (generates the output).
  5. Ta-da! You’re all done!

Here is the full index.html:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
  box-sizing: border-box;
}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width:100%;
  height:100%;
  resize: none;
  min-height:300px;
}
</style>
</head>
<body>

<p>Click on the tab to select the option, edit the text in the output underneath:</p>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'html')">HTML</button>
  <button class="tablinks" onclick="openTab(event, 'css')">CSS</button>
  <button class="tablinks" onclick="openTab(event, 'js')">Javascript</button>
  <button class="tablinks" onclick="openTab(event, 'code')">Output</button>
</div>


<textarea id="html" placeholder="HTML" class="tabcontent">
Your html script goes here....
</textarea> 
<textarea id="css" placeholder="CSS" class="tabcontent">
Placeholder css script text here...
</textarea> 
<textarea id="js" placeholder="javascript" class="tabcontent">
Your juicy Javascript code goes here ....
</textarea> 

<!-- the output is generated live! -->
<iframe id="code" placeholder="code" class="tabcontent"></iframe>
            

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
  
  if (tabName=='code')
  {
    compile();
  }
}
function compile() {
    var html = document.getElementById("html");
    var css = document.getElementById("css");
    var js = document.getElementById("js");
    //let output = output.contentWindow || output.contentDocument.document || output.contentDocument;
    //let code = output.document;
    
	var ifrm = document.getElementById('code');
	var code = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
	code = code.document;
	
    code.open();
    code.write(html.value + "<style>"+css.value+"</style>" + "<script>"+js.value+" <" + "/script>");
    code.close();
}

</script>
   
</body>
</html> 

:warning: Warning
A real problem to watch out for, is when you output your string to your iframe. Specifically writing <\script> causes the browser interpreter to think you’ve ended your script. However, a simple fix is to split the string <" + "/script>" - so your script works as it should!

Test it Out

Take the example for a spin run, click on the HTML tag button and enter some text but include tags, such as, h2, b, p, then click on the output tag and check the formatting is correct.

Take it even further! Go to the CSS tag button, and enter some style formatting script - then click on the output tag to see that it’s doing what you expected!

Some simple tweaks/further ideas:

  1. Temporarily store versions to localstorage so if your browser crashes, you don’t lose what you’re editing
  2. Extend localstorage to store versions (v1, v2, v3)
  3. Add Prettify so your code in the textareas are syntax highlighted (keywords are highlighted)
  4. Add a post option, to share your code snippets, uploads them to a common webpage (mix Ajax and Php? Or NodeJS?)

Example 'Live' Running


Click on the tab to select the option, edit the text in the output underneath:





Note: Just in case you noticed, if you put '</textarea>' inside the editor, then it will think it's the end of the user input section. However, a clever workaround is to detect this and replace it with something else, e.g., '<\/textarea>'. Then when you compile (run) your code, just add an extra line to replace the substitute word with the correct '</textarea>' word.

References

* Beautiful Code Highlighting [Link]




 

 
 Visitor: 9534626
{ 229.27.38.75 }
Copyright (c) 2002-2020 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.