How-to run HTML, CSS, JS code in iframe from textarea value

In this code we will be share with you how to create simple editor with preview for HTML CSS and JavaScript codes, we need textarea to write code and iframe to preview
<style> #editor{padding:5px; outline:0; border:0; border-radius:3px;box-shadow: 0 0 3px 0} #editor:focus{border:1px #eee; } #editor, #FileFrame{margin-top:5px;margin-bottom:5px} </style> <textarea id="editor" style="width:100%; height:200px"> <img src="https://cdn.pixabay.com/photo/2021/04/01/15/37/fruits-6142591__340.jpg" style="width:192px; height:108px"/> </textarea> <button onclick="runcode()">Run code</button> <iframe id="FileFrame" src="about:blank" style="width:100%; height:200px" ></iframe> <script type="text/javascript"> function runcode(){ var editor=document.getElementById("editor").value; var doc = document.getElementById('FileFrame').contentWindow.document; doc.open(); doc.write(editor); doc.close(); } </script>

© Manajmnt code

Share to :

☷✎