How can I create a basic HTML/CSS editor with Javascript?

Question

How can I create a basic HTML/CSS editor using Javascript? I have the code below and when I press the button, the code from HTML and CSS sections should be display with formatting in the element.

<html>
<head>
    <style>
        textarea {
            width: 45%;
            height: 200px;
            background: #eee;
            margin: 0 2%;
        }
        #content {
            margin: 0 20px;
            border: 1px solid #aaa;
            min-height: 200px
        }
        h1 {
            text-align: center;
            font-size: 20px
        }
        h2 {
            font-size: 18px
        }
    </style>
</head>
<body>
    <h1>A basic HTML / CSS editor</h1>
    <textarea id="html-code" placeholder="Insert HTML here"></textarea>
    <textarea id="css-code" placeholder="Insert CSS here"></textarea>
    <button  onclick="editor()">Apply HTML and CSS</button>
    <h2>Result</h2>
    <div id="content">
       
    </div>
  
</body>
</html>

are you wanting the code to save to your computer and update? or are you wanting it to run in browser? like SO code snippets? — mast3rd3mon, Apr 23 '18 at 09:13
then the only thing i can think of is to link it to a node server so you can write over the files — mast3rd3mon, Apr 23 '18 at 10:12

score 0 · Answer 1 · answered Apr 23 '18 at 09:14

0

Use an iframe to display the content HTML and CSS.

You can create an HTML code from the HTML and CSS text fields.

Then use the solution in:

How to set HTML content into an iframe

Html code as IFRAME source rather than a URL

to display within iframe.

answered Apr 23 '18 at 09:14

Harikrishnan N

874
1
10
19

May I know why the downvote? So that I can correct myself. – Harikrishnan N Apr 23 '18 at 09:16
I didn't downvote, but I guess it's because when you provide links you're expected to have a summary of what they're about so that when (not if; such is the state of the web today) they rot, someone can still find this answer useful. If that solution doesn't fit an answer, that means the question is too broad. EDIT: I see those links point to SO, but I think the point stands. – Federico klez Culloca Apr 23 '18 at 09:18

How can I create a basic HTML/CSS editor with Javascript?

1 Answers1