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> © Manajmnt code Share to : ☷✎ Comments
Comments
Post a Comment
message