Please indicate the source of Reprint: Official website of grape City Grape city provides developers with professional development tools, solutions and services to enable developers.
Source: https://blog.bitsrc.io/build-an-html-css-js-playground-64c62133746d
At present, there are many similar platforms and schemes on the market, such as jsfiddle, CodePen and Storybook. These platforms allow us to create code in the browser and execute it directly without creating a project in our own place. Therefore, when you are testing a piece of code, these platforms may provide some help for you.
This article is the first in our "how to create an editor" series, which may include:
- Create an Angular editor
- Create a React editor
- ...
In this article, we'll learn how to create a basic HTML/CSS/JS editor.
Let's start now
First, create a project folder, for example: "JS editor“
Create index.html and editor.js files
Now, we create a tab for HTML, CSS and JS. Each tab contains a text box, one for HTML, another for CSS, and the last for JS. We will use iframe to render all HTML, CSS, JS. Iframe is an HTML tag for creating a new browser instance. It can present all your customized code effects in it, just as you can see directly in the browser.
Now, there's not much nonsense. The code of index.html is as follows:
<html>
<title>HTML/CSS/JS Playground</title>
<link rel="stylesheet" href='./bootstrap.min.css' />
<body>
<style>
textarea {
background-color: black;
color: white;
width: 600px;
height: 350px;
}
iframe {
width: 400px;
height: 350px
}
</style>
<div class="container">
<h3>HTML/CSS/JS Playground</h3>
<div class="row">
<div class="col-12">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#html" data-toggle="tab"> HTML</a></li>
<li><a href="#css" data-toggle="tab">CSS</a></li>
<li><a href="#js" data-toggle="tab">JS</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="html">
<p>
<textarea style="float:left" id="htmlTextarea"></textarea>
</p>
</div>
<div class="tab-pane fade" id="css">
<p>
<textarea style="float:left" id="cssTextarea"></textarea>
</p>
</div>
<div class="tab-pane fade" id="js">
<p>
<textarea style="float:left" id="jsTextarea"></textarea>
</p>
</div>
</div>
</div>
<div class="col-12">
<div>
<iframe id="iFrame"></iframe>
</div>
</div>
</div>
</div>
</body>
<script src="./jquery.js"></script>
<script src="./bootstrap.min.js"></script>
<script src="./editor.js"></script>
</html>
In order to make the tab function easier to implement, I used bootstrap.min.js, bootstrap.min.css and jquery.js to help me.
Now, let's continue to enrich editor.js:
const getEl = id => document.getElementById(id)
const iFrame = getEl('iFrame').contentWindow.document
const htmlTextArea = getEl('htmlTextarea')
const cssTextArea = getEl('cssTextarea')
const jsTextArea = getEl('jsTextarea')
document.body.onkeyup = function() {
iFrame.open()
iFrame.writeln(
htmlTextArea.value +
'<style>' +
cssTextArea.value +
'</style>' +
'<script>' +
jsTextArea.value +
'</script>'
)
iFrame.close()
}
We have a function getEl, which gets the elements through the id of Dom. Next, we get the contentwindow.document of iframe. Then, we create instances of HTML, CSS and JS textarea respectively, and get the content.
We listened to the keyup event of the body element. If any content is entered by its child element, a call to the function will be triggered. Then we write to Dom through writeln. By obtaining these content, we can add appropriate content to the corresponding tag.
Start using editor
OK, after a few simple lines of code, our editor has begun to take shape. Please load index.html in the browser. In this way, we can enter the corresponding code in the corresponding tab, and the iframe on the right can fully present the HTML, CSS and JS you set.
You can see from the gif below how I add the button with ID "but", then set the style, add the click event on the button and pop up the "yes" box.
conclusion
It's very simple to make an editor of my own. I also provide the project address used in this article at the end of the article. If you have any questions or suggestions, please put forward. Thank you!