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

Can someone describe and a high level (with detail ofcourse) how one goes about designing a html editor preview feature?

有人可以描述和高级别（详细的课程）如何设计html编辑器预览功能？

(like on this site)

（比如在这个网站上）

What do you have to do really?

你真的要做什么？

1 个解决方案

#1

Well, a very simple one might just assign the user's input to the be the HTML of a div. Using jQuery, this would look something like this:

好吧，一个非常简单的可能只是将用户的输入分配给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>

If you aren't using jQuery, you can investigate the innerHTML property, that is what you would assign to do your preview.

如果您不使用jQuery，则可以调查innerHTML属性，即您为预览分配的属性。

Note that you may want to do some filtering of the user's input; serving arbitrary HTML from your site would allow XSS (cross site scripting) against your domain. Note that writing an effective filter can be very difficult, and a good one (like the one used by stackoverflow) will almost certainly be based on a white-list.

请注意，您可能希望对用户的输入进行一些过滤;从您的站点提供任意HTML将允许针对您的域的XSS（跨站点脚本）。请注意，编写有效的过滤器可能非常困难，并且一个好的过滤器（如stackoverflow使用的过滤器）几乎肯定会基于白名单。

1 个解决方案

#1

更多相关文章

随机推荐