Theory behind designing a html editor preview feature

Question

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

(like on this site)

What do you have to do really?

Answer 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:

<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.

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.