背後的理論設計一個HTML編輯器預覽功能

Question

有人可以描述和高層次（與細節ofcourse）如何去設計一個HTML編輯器預覽功能？

（喜歡本網站）

你真的要做什麼？

Answer 1

好吧，一個非常簡單的可能只是分配用戶的輸入是一個div的HTML。使用jQuery，這將是這個樣子：

<textarea id="userInput"></textarea><br> 
<div id="previewDiv"></div> 

<script> 
$(document).ready(function(){ 
    // Whenever the user input changes, update the preview 
    $("#userInput").change(function(){ 
     $("#previewDiv").html($("#userInput").val()); 
    } 
} 
</script> 

如果你不使用jQuery，你可以調查innerHTML特性，那就是你會分配給你做什麼的預覽。

請注意，您可能需要對用戶的輸入進行一些篩選;從您的網站提供任意HTML將允許XSS（跨網站腳本）針對您的域名。請注意，編寫一個有效的過濾器可能非常困難，而一個好的過濾器（比如stackoverflow使用的過濾器）幾乎肯定會基於白名單。