有人可以描述和设计html编辑器预览功能的高级别(详细信息)?
(就像在这个网站上一样)
你真的需要做什么?
答案 0 :(得分:5)
嗯,一个非常简单的人可能只是将用户的输入分配给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使用的过滤器)几乎肯定会基于白名单。