How-to create many html editors with preview in one page only

to create many html editors with preview in one page, we need to use for loop method of javascript and codemirror library.

 <html>
  <head>
  <link rel=stylesheet href=https://codemirror.net/lib/codemirror.css>
<script src=https://codemirror.net/lib/codemirror.js></script>
<script src=https://codemirror.net/mode/xml/xml.js></script>
<script src=https://codemirror.net/mode/javascript/javascript.js></script>
<script src=https://codemirror.net/mode/css/css.js></script>
<script src=https://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
  <style type=text/css>
      .CodeMirror {
        float: left;
        width: 50%;
        border: 1px solid black;
      }
      iframe {
        width: 48%;
        float: left;
        height: 300px;
        border: 1px solid black;
        border-left: 0px;
      }
    </style>
  </head>
  <body>
    <textarea class="code"><h1>code1</h1></textarea>
    <iframe class="previewcode"></iframe>
     <textarea class="code"><h1>code2</h1></textarea>
    <iframe class="previewcode"></iframe>
    
     <textarea class="code"><h1>code3</h1></textarea>
    <iframe class="previewcode"></iframe>
    
    <script>
      var delay;
      var codem =document.getElementsByClassName('code');
      var ed;
   for (ed = 0; ed < codem.length; ed++) { 

      var editor = CodeMirror.fromTextArea(document.getElementsByClassName('code')[ed], {
        mode: 'text/html',
        lineNumbers: true,
      });

 var previewFrame = document.getElementsByClassName('previewcode');
var preview =  previewFrame[ed].contentDocument ||  previewFrame[ed].contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();


   }
      
    </script>
  </body>
</html>

How-to create many html editors with preview in one page only

☷✎

How-to create many html editors with preview in one page only

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

blogger meta description generator

How-to create html editor with context buttons

How-to create many html editors with preview in one page only

Related

Comments

Post a Comment