你可以有另一个div专门用于显示预览，然后，当用户切换HTML视图时，将文本区域的值插入div的innerHTML并显示它。
但是，这可能会使您的应用程序暴露在XSS攻击之下，因此在使用它时要小心。

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

文本区域不能显示html，你可以使用div和contenteditable属性，如下所示：

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>

希望这能有所帮助!

这个解决方案有一个按钮，可以使用jQuery click在"Preview"和"Edit"之间切换，单击时它获取文本区域的值，并将该值设置为HTML格式的div。

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

试试这个

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>