balisage et exécution de HTML, CSS et JavaScript à partir de zones de texte distinctes.

Question

J'ai trouvé un code pour le balisage en temps réel du HTML et du CSS dans différentes zones de texte en utilisant une fonction jQuery qui sort dans une iframe :

HTML

<div class="container grid">
   <form>
      <h3>HTML</h3>
      <textarea id="html" class="edit"></textarea>     // TEXTAREA FOR HTML

      <h3>CSS</h3>
      <textarea id="css" class="edit"></textarea>       // TEXTAREA FOR CSS
   </form>
</div>
<div class="output grid">
   <iframe></iframe>
</div>

JQUERY pour le balisage

function() {
   $(".grid").height($(window).height());

   var contents = $("iframe").contents(),
       body = contents.find("body"),
       styleTag = $("<style></style>").appendTo(contents.find("head"));

   $("textarea.edit").keyup(function() {
      var $this = $(this);
      if ($this.attr("id") === "html") {
         body.html($this.val());
      } else {
         // it had to be css
         styleTag.text($this.val());
      }
   });
})();

Et si je voulais un autre textarea pour le javascript ? Je suppose qu'il n'est pas possible de l'exécuter en temps réel et que je dois donc inclure un bouton pour exécuter un fichier javascript. eval() Mais comment ?

Answer 1

Dans votre HTML, vous pouvez avoir une autre zone de texte pour le code javascript.

Dans votre gestionnaire d'événement textarea.edit, vous pouvez ajouter une autre vérification pour le javascript et utiliser quelque chose comme ceci : - le texte de l'événement textarea.edit.

$iframeEl.append(`<script>${textarea.val()}</script>`); 

Cette ligne exécutera également votre script car le navigateur réanalyse le document chaque fois qu'il rencontre un changement DOM et il exécutera également la balise script.

Nous devrions de toute façon nous abstenir d'utiliser le mot-clé eval car il s'agit d'une opération coûteuse et il est conseillé de ne pas l'utiliser.