SNT

Cours de SNT
git clone git://git.vgx.fr/SNT
Log | Files | Refs

edit.html (1370B)

      1 <head>
      2 <meta charset="UTF-8">
      3 <style type="text/css" media="screen">
      4     #edcontainer {
      5         display: flex;
      6     }
      7     .edcolumn {
      8         flex: 50%;
      9     }
     10     #editor {
     11         width: 100%;
     12     }
     13     #editout {
     14         width: 100%;
     15     }
     16 </style>
     17 </head>
     18 
     19 <div id="edcontainer">
     20     <div class="edcolumn">
     21         Code HTML :
     22         <div id="editor"></div>
     23     </div>
     24     <div class="edcolumn">
     25         Résultat :
     26         <iframe id="editout"></iframe>
     27     </div>
     28 </div>
     29 <div id="stats"></div>
     30 
     31 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.js"></script>
     32 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-html.min.js"></script>
     33 <script>
     34     var editor = ace.edit("editor");
     35     var iframe = document.getElementById("editout");
     36 
     37     editor.setOption('maxLines', 15)
     38     editor.session.setMode("ace/mode/html");
     39 
     40     editor.session.on('change', function() {iframe.srcdoc = editor.getValue();});
     41 
     42     iframe.onload = function() {
     43         var doc = iframe.contentDocument;
     44         var stats = document.getElementById("stats");
     45 
     46         var num_bold = doc.getElementsByTagName("b").length;
     47         stats.innerHTML = "Nombre de gras : " + num_bold;
     48 
     49         for(t of doc.getElementsByTagName("*"))
     50             stats.insertAdjacentHTML("beforeend", "<p>"+t.tagName+"</p>");
     51 
     52         
     53     }
     54 
     55     editor.setValue("lol")
     56 </script>
     57