Toggle between HTML code and preview using textarea

Question

I want to Toggle between HTML code and Preview html using textarea

When HTML is clicked it would show the code hiding the textarea and when again HTML is clicked it would show back again

I want to have design Something like this

I have tried with

 <style>.container { width:500px; position: fixed; }.right-element { background: red; display: inline-block; position: absolute; right: 0; } </style> <div class="container"> <div class="right-element"> Preview </div> <textarea id="w3review" name="w3review" style="position:relative;width:100%;height:75%;resize: none; " ><h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3></textarea> </div>

Answer 1

You could have another div specifically for showing the preview. Then, when the user toggles the HTML view, insert the textarea's value into the innerHTML of the div and show it.

This could expose your application to XSS attacks though, so be careful when using it.

 $('.right-element').click(function() { $(this).toggle() $(this).siblings().toggle() togglePreview() }) let showPreview = false const w3Preview = $('#w3review-preview') function togglePreview() { if (.showPreview) { w3Preview.html(w3review.value) w3Preview.show() $(w3review).hide() } else { w3Preview.hide() $(w3review).show() } showPreview = !showPreview }

 #html,#w3review-preview{display:none}.container{position:fixed;width:500px}.right-element{background:red;display:inline-block;position:absolute;right:0;z-index:1}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div> <div class="right-element" id="preview"> Preview </div> <div class="right-element" id="html"> HTML </div> </div> <textarea id="w3review" name="w3review" style="position:relative;width:100%;height:75%;resize: none; "><h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3></textarea> <div id="w3review-preview" style="position:relative;width:100%;height:75%;"></div> </div>

Answer 2

Textarea can't display html, you can use div with attribute contenteditable instead like this:

 var w3reviewItem = $('#w3review'); var previewItem = $('#preview'); $(previewItem).on('click', (e) => { var type = $(w3reviewItem).attr('data-type'); var textStr; switch(type) { case 'html': { textStr = $(w3reviewItem).html(); $(w3reviewItem).attr('data-type', 'text'); $(w3reviewItem).text(textStr); break; } case 'text': { textStr = $(w3reviewItem).text(); $(w3reviewItem).attr('data-type', 'html'); $(w3reviewItem).html(textStr); break; } } });

 <style>.container { width:500px; position: relative; }.right-element { background: red; display: inline-block; position: absolute; right: 0; cursor: poniter; z-index: 999; } #w3review { position: absolute; width: 100%; height: 70px; border: 1px solid green; } </style>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="right-element" id="preview"> Preview </div> <div contenteditable="true" id="w3review" name="w3review" data-type="html"> <h3> At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies. </h3> </div> </div>

Hope this help!

Answer 3

This solution has a button that toggles between "Preview" and "Edit" using jQuery click. On click it grabs the textarea value, and sets a div with the value as HTML.

 $(function() { $('#previewButtonContainer button').click(function() { if($(this).data('preview')) { $(this).text('Preview').data('preview', ''); $('#htmlEdit').show(); $('#htmlPreview').hide(); } else { $(this).text('Edit').data('preview', '1'); let html = $('#htmlEdit').val(); $('#htmlPreview').html(html); $('#htmlEdit').hide(); $('#htmlPreview').show(); } }); });

 .container { width: 502px; } #htmlEdit { width: 500px; height: 150px; resize: none; padding: 3px 6px; } #htmlPreview { position: absolute; width: 500px; height: 150px; border: 1px solid gray; padding: 3px 6px; display: none; } #previewButtonContainer { width: 60px; float: right; } #previewButtonContainer button { width: 60px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div id="previewButtonContainer"><button>Preview</button></div> <div style="clear: both;"></div> <div id="htmlPreview"></div> <textarea id="htmlEdit" name="htmlEdit" style=" " ><h3>Lorem ipsum dolor sit amet,</h3> <p>consectetur adipiscing <b>elit</b>, sed do eiusmod tempor incididunt ut <b>labore</b> et <b>dolore</b> magna aliqua.</p></textarea> </div>

Answer 4

Try this

 function showHTML() { var innerText = document.getElementById("w3review").value; document.getElementById("w3review").style.display = 'none'; document.getElementById("htmlContainer").style.display = 'block'; document.getElementById("htmlContainer").innerHTML = innerText; } function showText() { document.getElementById("w3review").style.display = 'block'; document.getElementById("htmlContainer").style.display = 'none'; }

 .container { width: 500px; position: fixed; }.right-element { background: red; display: inline-block; } #htmlContainer { display: "none"; }

 <div class="container"> <div class="right-element" onClick="showText()"> Preview </div> <div class="right-element" onClick="showHTML()"> HTML </div> <textarea id="w3review" name="w3review" style="position:relative;width:100%;height:75%;resize: none; "><h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3></textarea> <div id="htmlContainer"></div> </div>