Display LIVE Preview Of Textarea Front End Javascript

Question

On my project I have a div which is a text area where I can wrap text in to code format.

I also have a button with a id="preview"

Is it possible in another div to display the output of the text area once click on preview button in a front end view like what it would be like on IE or FIREFOX.

Codepen Example: http://codepen.io/riwakawebsitedesigns/pen/lfpKF

HMTL Code

<div class="container">
<textarea id="widget">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus repellendus inventore, voluptatum ipsa ipsum debitis voluptates, laudantium nulla odio sed, pariatur quaerat quae numquam beatae ad odit optio quasi magni explicabo tenetur. Consectetur, animi, autem? Non laboriosam ad nisi, commodi, dolores soluta. Dolorum error unde itaque ipsum a? Libero sapiente eligendi similique, itaque deserunt aliquid magnam ducimus nesciunt, iste ad 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 put 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>");
});

If I have wrapped the text in code tags and the click on preview not out putting it in code. — , Oct 15 '14 at 05:37

score 3 · Accepted Answer · answered Oct 15 '14 at 05:24

3

Change your ID of preview button, like this:

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

And in your JS:

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

CodePen Demo

answered Oct 15 '14 at 05:24

dashtinejad

6,193
4
28
44

Does not allow me to wrap html and php code in pre/code tags – Oct 15 '14 at 05:56
@acoderslife You should escape `<` and `>` with `<` and `>`. [See this question](http://stackoverflow.com/questions/11386586/how-to-show-div-tag-literally-in-code-pre-tag). – dashtinejad Oct 15 '14 at 06:03
I tried that produces blank places the pre code tags at top of div does not wrap it when have other code even when use > http://codepen.io/riwakawebsitedesigns/pen/lfpKF – Oct 15 '14 at 06:07
@acoderslife Bypass `&` with `&`. See the [Pen](http://codepen.io/anon/pen/rbClB). – dashtinejad Oct 15 '14 at 06:21
Still does not code tag button does not wrap div tags still even with that very strange show this
on top does not wrap it when div tags tried every thing I can think of.
– Oct 15 '14 at 06:37

Display LIVE Preview Of Textarea Front End Javascript

1 Answers1