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 >
    <div >
        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>

CodePudding user response：

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 >
  <div>
    <div  id="preview">
      Preview
    </div>
    <div  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>

CodePudding user response：

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 >
  <div  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!

CodePudding user response：

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 >
  <div  onClick="showText()">
    Preview
  </div>
  <div  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>