How to make a simple HTML Code Editor using HTML, CSS, and Javascript ?
In this article, we will learn how to make a simple HTML code editor using HTML, CSS, and Javascript from scratch.
You can see its demo here.
The logic behind this code editor is simple. we have created a div with id as " editor" and having contenteditable attribute set true. By setting a contenteditable true in a div we can edit the content in the div similar to what we can do in textarea. Inside this div we place our HTML code. To display the output we have used an iframe. we have passed the textContent of editable div as the srcdoc of the iframe, by doing this when we type any HTML statements in the editor the output is seen in the iframe immediately.
To make the editor more interesting three buttons are added to Execute, Save as HTML, and Copy the HTML respectively.
The styling is basic. you can understand it by looking at the code given below. We recommend you to watch the video along with the code for better understanding.
The code to make a HTML code Editor is
See the Pen
HTML Code Editor by Vidyasheela (@_vidyasheela)
on CodePen.
Download the HTML files from here. DOWNLOAD LINK
Post a Comment
No Comments