Question 35631 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Toggle between HTML code and preview using textarea – Jquery

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

enter image description here

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>
Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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!

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search