javascript - 设计 html 编辑器预览功能背后的理论

Question

有人可以描述一下高层次的(当然是详细的)如何设计 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 使用的过滤器)几乎肯定会基于白名单。