使用 textarea 在 HTML 代碼和預覽之間切換

Question

我想使用 textarea 在 HTML 代碼和預覽 html 之間切換

單擊 HTML 時，它會顯示隱藏文本區域的代碼，再次單擊 HTML 時，它會再次顯示

我想要設計這樣的東西

我試過

 <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

您可以有另一個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>

Answer 2

Textarea 無法顯示 html，您可以使用帶有屬性 contenteditable 的 div，如下所示：

 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>

希望這有幫助！

Answer 3

此解決方案有一個按鈕，可使用 jQuery 單擊在“預覽”和“編輯”之間切換。 單擊它會獲取 textarea 值，並設置一個值為 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>

Answer 4

嘗試這個

 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>