Togol kawasan teks untuk bertukar antara kod HTML dan pratonton

Question

Saya mahu menggunakan kawasan teks untuk bertukar antara kod HTML dan pratonton html

Apabila mengklik pada HTML, ia akan menunjukkan kod kawasan teks tersembunyi Apabila mengklik semula HTML, ia akan dipaparkan semula

Nak design macam ni

Saya dah cuba

<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

Anda boleh mempunyai div 专门用于显示预览。然后，当用户切换 HTML 视图时，将文本区域的值插入到 div 的 innerHTML lain di dalamnya dan paparkannya.

Tetapi ini mungkin mendedahkan aplikasi anda kepada serangan XSS, jadi gunakannya dengan berhati-hati.

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