jquery - Display LIVE Preview Of Textarea Front End Javascript -

jquery - Display LIVE Preview Of Textarea Front End Javascript -

on project have div text area can wrap text in code format.

i have button id="preview"

is possible in div display output of text area 1 time click on preview button in front end end view similar on ie or firefox.

codepen example: http://codepen.io/riwakawebsitedesigns/pen/lfpkf

hmtl code

<div class="container"> <textarea id="widget">lorem ipsum dolor sit down amet, consectetur adipisicing elit. temporibus repellendus inventore, voluptatum ipsa ipsum debitis voluptates, laudantium nulla odio sed, pariatur quaerat quae numquam beatae advertisement odit optio quasi magni explicabo tenetur. consectetur, animi, autem? non laboriosam advertisement nisi, commodi, dolores soluta. dolorum error unde itaque ipsum a? libero sapiente eligendi similique, itaque deserunt aliquid magnam ducimus nesciunt, iste advertisement nihil labore assumenda soluta earum. rerum deserunt totam aperiam maiores facere eum sapiente modi non debitis consectetur voluptatum, voluptatibus labore repellendus tempora voluptate error nesciunt eaque possimus. consectetur laborum ab ipsum, voluptate perspiciatis quos omnis delectus dicta mollitia atque voluptates!</textarea> <div class="buttons"> <button id="code">code</button> <button id="preview">preview</button> </div> <!-- should display live out set of wraped code.--> <div id="preview" class="code-preview"></div> </div>

javascript

function wraptext(elementid, opentag, closetag) { var textarea = $('#' + elementid); var len = textarea.val().length; var start = textarea[0].selectionstart; var end = textarea[0].selectionend; var selectedtext = textarea.val().substring(start, end); var replacement = opentag + selectedtext + closetag; textarea.val(textarea.val().substring(0, start) + replacement + textarea.val().substring(end, len)); } $('#bold').click(function() { wraptext("widget", "<strong>", "</strong>"); }); $('#italic').click(function() { wraptext("widget", "<em>", "</em>"); }); $('#underline').click(function() { wraptext("widget", "<u>", "</u>"); }); $('#code').click(function() { wraptext("widget", "<pre><code>", "</code></pre>"); });

change id of preview button, this:

<button id="preview-btn">preview</button>

and in js:

$('#preview-btn').on('click', function () { $('#preview').html($('#widget').val()); });

codepen demo

javascript jquery