国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Fran?ais

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

P粉006977956 2024-03-31 11:52:47

593

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>

P粉006977956

répondre à tous(1)

P粉8313104042024-04-01 10:54:05 1 plancher

Vous pouvez en avoir un autre div 專門用于顯示預(yù)覽。然后，當(dāng)用戶切換 HTML 視圖時，將文本區(qū)域的值插入到 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>