Web Designer & Developer
Web Designer & Developer
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to Create a Text Editor Live Preview</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> </head> <body> <div class="container"> <h1 class="page-header text-center">Create a Text Editor Live Preview</h1> <div class="row"> <div class="col-sm-6"> <textarea id="content" name="content" class="form-control" rows="10">Try to edit Me!</textarea> <br> <button type="button" id="run" class="btn btn-primary">Preview</button> </div> <div class="col-sm-6"> <iframe name="landingPage" id="landingPage" class="col-lg-12 col-md-12 col-sm-12" height="400px"></iframe> </div> </div> </div> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> <script type="text/javascript"> $(function () { //Add text editor $("#content").wysihtml5(); var content = $('#content').val(); runCode(content); $('#run').click(function(){ content = $('#content').val(); runCode(content); }); }) function runCode(content){ var iframe = document.getElementById('landingPage'); iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument; iframe.document.open(); iframe.document.write(content); iframe.document.close(); return false; } </script> </body> </html>