Théorie derrière la conception d'une fonctionnalité de prévisualisation de l'éditeur html

Question

Quelqu'un peut-il décrire et de haut niveau (avec le détail du cours) comment on conçoit une fonctionnalité de prévisualisation de l'éditeur html?

(comme sur ce site)

Qu'est-ce que vous avez à faire vraiment?

Answer 1

Eh bien, un très simple pourrait juste affecter l'entrée de l'utilisateur à être le HTML d'un div. En utilisant jQuery, cela ressemblerait à quelque chose comme ceci:

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

Si vous ne l'utilisez jQuery, vous pouvez enquêter sur la propriété innerHTML, c'est-ce que vous associerez à faire votre aperçu.

Notez que vous pouvez effectuer un filtrage de l'entrée de l'utilisateur; Le fait de servir du code HTML arbitraire à partir de votre site autoriserait XSS (script intersite) contre votre domaine. Notez que l'écriture d'un filtre efficace peut être très difficile, et une bonne (comme celle utilisée par stackoverflow) sera presque certainement basée sur une liste blanche.