设计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使用的过滤器）几乎肯定会基于白名单。