Basculer la zone de texte pour basculer entre le code HTML et l'aperçu

Question

Je souhaite utiliser la zone de texte pour basculer entre le code HTML et l'aperçu HTML

Lorsque vous cliquez sur le HTML, le code de la zone de texte masquée s'affichera En cliquant à nouveau sur le HTML, il réapparaîtra

Je veux concevoir quelque chose comme ça

J'ai essayé

<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

Vous pouvez en avoir un autre div 专门用于显示预览。然后，当用户切换 HTML 视图时，将文本区域的值插入到 div 的 innerHTML et l'afficher.

Mais cela peut exposer votre application à des attaques XSS, alors utilisez-la avec prudence.

$('.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}

sssccc

  

    

      Preview
    
    

      HTML
    
  
  <h3>At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</h3>