There are already a number of platforms and solutions like JSFiddle, CodePen, Storybook that allow us to create code in the browser and execute it directly, without having to create a project locally, so when you’re testing a piece of code, These platforms may be able to offer you some help.
This article is the first in our “How to Create ____ Editor” series, which may include:
- Create an Angular editor
- Create a React editor
- …
In this article, we will learn how to create a basic HTML/CSS/JS editor.
Let’s get started at once
First, create a project folder, such as “js_Editor”
Create index.html and editor.js files
Now we create an HTML, CSS, and JS TAB. Each TAB contains a text box, one for HTML, another for CSS, and the last one for JS. We will use iframe to render all HTML, CSS, and JS. Iframe is an HTML tag that creates a new browser instance and renders all your custom code effects as if you were viewing them directly in the browser.
Now, without further ado, the entire code for index.html is as follows:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<html>
<title>HTML/CSS/JS Playground</title>
<linkrel="stylesheet" href='./bootstrap.min.css' />
<body>
<style>
textarea {
background-color: black;
color: white;
width: 600px;
height: 350px;
}
iframe {
width: 400px;
height: 350px
}
</style>
<divclass="container">
<h3>HTML/CSS/JS Playground</h3>
<divclass="row">
<divclass="col-12">
<ulid="myTab" class="nav nav-tabs">
<liclass="active"><ahref="#html" data-toggle="tab"> HTML</a></li>
<li><ahref="#css" data-toggle="tab">CSS</a></li>
<li><ahref="#js" data-toggle="tab">JS</a></li>
</ul>
<divid="myTabContent" class="tab-content">
<divclass="tab-pane fade in active" id="html">
<p>
<textareastyle="float:left" id="htmlTextarea"></textarea>
</p>
</div>
<divclass="tab-pane fade" id="css">
<p>
<textareastyle="float:left" id="cssTextarea"></textarea>
</p>
</div>
<divclass="tab-pane fade" id="js">
<p>
<textareastyle="float:left" id="jsTextarea"></textarea>
</p>
</div>
</div>
</div>
<divclass="col-12">
<div>
<iframeid="iFrame"></iframe>
</div>
</div>
</div>
</div>
</body>
<scriptsrc="./jquery.js"></script>
<scriptsrc="./bootstrap.min.js"></script>
<scriptsrc="./editor.js"></script>
</html>
|
I used bootstrap.min.js, bootstrap.min. CSS and jquery.js to help me make the tabs a little easier to implement.
Now, let’s continue enriching editor.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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 called getEl that gets the element by the Dom ID, and now we get the iframe contentWindow.document. Then, we create instances of HTML, CSS, JS textarea, and get the content.
We listen for the keyUp event of the body element, and if its child enters anything, the function is called, which then writes to the Dom via writeln. By fetching this content, we can add the appropriate content to the corresponding tag.
Start using the editor
Ok, with just a few lines of code, our editor has taken shape. Please load index.html in your browser. From here, you can enter the corresponding code in the corresponding TAB, and the iframe on the right side will render the HTML, CSS, and JS that you set.
You can see in the GIF below how I added the button with the ID “but”, then styled it, and added a click event to the button and brought up the “Yes” box.
conclusion
It is very easy to make your own editor. I also provided the project address for this article at the end of this article. If you have any questions or suggestions, please feel free to make them.
Download the source demo package
This article is published by grape City technology development team, reprint please indicate source: grape city official website
To learn about online Excel that can be embedded in your system, head over to SpreadJS pure front-end table controls