Real-Time Html editor with Javascript

Question

Here is my code where I try to build real-time html editor.In javascript I get the text from textarea which has id=pure then in document.body.onkeyup function I pass the value to the textarea that has id=compiled. It does not work at all. I wonder if the problem is about open-writeln-close or another syntax?

function compile() {

    var h = document.getElementById("pure");
    var compiled = document.getElementById("compiled").contentWindow.document;

     document.body.onkeyup = function(){
        compiled.open();
        compiled.writeln(h.value);
        compiled.close();
      };
    }

compile();




<div class="form-group">
  <label for="html">Write your HTML here:</label>
  <textarea class="form-control" rows="3" id="pure"></textarea><br>
    <textarea class="form-control" rows="2" id="compiled"></textarea>
</div>

I'm pretty sure you mean an <iframe> as compiled output. <textarea> doesnt have a contentWindow — wayneOS
– wayneOS, Commented Mar 21, 2018 at 14:56

Keith · Accepted Answer · 2018-03-21 15:07:50Z

1

Not 100% sure what your after looking at your code.

But if all your after is have a TextArea were you can put HTML markup, and then see a preview. Below is an example..

var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
  compiled.innerHTML = h.value;
  pure.classList.toggle("error",
    compiled.innerHTML !== h.value); 
};
h.onkeyup();

.error {
 background-color: red;
 color: white;
}

<label for="html">Write your HTML here:</label>
<br>
<textarea class="form-control" rows="3" id="pure">
Hello <b>world</b>
</textarea><br>
<div id="compiled"></div>

edited Mar 21, 2018 at 15:07

answered Mar 21, 2018 at 14:57

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ra Ha Over a year ago

Actualy this was what I was trying but I have a question. When you write <h1> Hallo</h2> or <h1> Hallo</h1> you get the same result. Is it possible to get the pure html on preview if it is not valid?

Keith Over a year ago

If you mean show you some sort of error, you just check the saved HTML and see if it's the same as your TextArea, if there different you know there is an Error. I've updated Snippet, type some invalid HTML and the TextArea will go red.

AdyDev · Accepted Answer · 2018-03-21 14:57:09Z

0

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>

answered Mar 21, 2018 at 14:57

AdyDev

1067 bronze badges

Collectives™ on Stack Overflow

Real-Time Html editor with Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related