andriprasetiya Posted July 18, 2017 Share Posted July 18, 2017 how to make HTML live editor, same as in "www.w3schools.com"? Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2017 Share Posted July 18, 2017 This is the most primitive example using just Javascript: <textarea id="source"></textarea> <button id="action">Run</button> <iframe id="destination"></iframe> <script> var source = document.getElementById("source"); var destination = document.getElementById("destination"); var button = document.getElementById("action"); button.addEventListener("click", run, false); function run() { var d = destination.contentDocument; d.open(); d.write(source.value); d.close(); } </script> We have a textarea with the HTML code, an <iframe> where the HTML page is rendered and a button that copies the code from the textarea into the page. This will not look very pretty, so you should style it with CSS. There's also a server-side way to do it, but it is more complicated and you need to learn a server-side language. The advantage of the server-side version is that it will work even on browsers that have Javascript disabled. The concept is simple: You have a form that has an iframe as a target, when the form is submitted, the HTML code that was sent to the server is printed directly onto the page inside the iframe. Link to comment Share on other sites More sharing options...
Baduymda Posted July 19, 2017 Share Posted July 19, 2017 <textarea id="source"></textarea> <button id="action">Run</button> <iframe id="destination"></iframe> <script> var source = document.getElementById("source"); var destination = document.getElementById("destination"); var button = document.getElementById("action"); button.addEventListener("click", run, false); function run() { var d = destination.contentDocument; d.open(); d.write(source.value); d.close(); } </script> thanks Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 thanks man Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 (edited) this code is not working, please to tell me Where the location of his code error <!DOCTYPE HTML> <html lang="en-US"> <head> <style> /************************* * Global Style *************************/ *{ margin:0; padding:0; font-family:"TheSans"calibri,arial,sans-serif; color:#333; } html{height:100%;} .clearfix{clear:both;} /************************* * Header, Toolbar *************************/ #header{background:url("https://dl.dropbox.com/u/26808427/cdn/ariona/demo/text-editor/grid_noise.png")} #logo{ margin:10px 0 10px 10px; display: inline-block; } #toolbar{ border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; height:20px; padding:10px; box-shadow:0 5px 10px -7px rgba(0,0,0,.3); height:30px; background: -webkit-linear-gradient(top,#fff,#efefef); } #editor-toolbar,#preview-toolbar{ width:50%; float:left; } #toolbar h2{ font-weight:normal; text-shadow:0 1px 1px white; color:#888; line-height:35px; display: inline-block; } .icon{ font-family:"web symbols"; margin-right:20px; font-size:16px; position: relative; top:-2px; color:#888; } #toolbar ul{list-style:none;float:right;margin-right:20px;} #toolbar ul li{float:left;} .button{ padding:5px 10px; border:1px solid #e3e3e3; border-radius:3px; cursor:pointer; background: -webkit-linear-gradient(top,#fff,#eee); box-shadow:0 1px 1px white; } #download{ padding:0;width:100px;height:30px; border:1px solid #e3e3e3; border-radius:3px; cursor:pointer; box-shadow:0 1px 1px white; position: relative; z-index:2; } #download:after{ content:"Download"; position: absolute; top:0;left:0; width:100px; height:25px; padding-top:5px; text-align:center; background: -webkit-linear-gradient(top,#fff,#eee); z-index:-1; } /************************* * IDE (EDITOR & PREVIEW) *************************/ #ide{ position: absolute; padding-top:10px; top:150px; left:0; right:0; bottom:10px; } #editor, #preview{ width:50%; float:left; height:100%; position:relative; } .container{ height:100%; position: absolute; top:-10px; left:0; right:0; bottom:10px; } #editor .container{ border-right:1px solid #e3e3e3; bottom:0; } .container textarea,.container iframe,.CodeMirror{ height:100%; width:100%; resize:none; border:none; outline:none; } .container iframe{ position:absolute; } /************************* * CodeMirror Style Fix *************************/ .CodeMirror-scroll{height:100% !important} .CodeMirror-gutter,.CodeMirror-lines{line-height:20px;} ::-webkit-scrollbar { width : 5px; height: 5px; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius : 10px; background : #A8DAEA; } ::-webkit-slider-thumb element, ::-webkit-scrollbar-track { background : white; -webkit-border-radius: 10px; border-radius : 10px; } </style> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="codemirror.css"> <script type="text/javascript" src="codemirror.js"></script> <script type="text/javascript" src="javascript.js"></script> <script type="text/javascript" src="css.js"></script> <script type="text/javascript" src="htmlmixed.js"></script> <script type="text/javascript" src="xml.js"></script> <script type="text/javascript" src="zen_codemirror.js"></script> <script type="text/javascript" src="downloadify.min.js"></script> <script type="text/javascript" src="swfobject.js"></script> <meta charset="UTF-8"> <title>Ariona Live Text Editor</title> </head> <body > <div id="header"> <a href="http://www.ariona.net" id="logo"><img src="logo.png" alt=""></a> <div id="toolbar"> <div id="editor-toolbar"> <h2><span class="icon">H</span>Editor</h2> <ul> <li id="download">Download</li> </ul> </div> <div id="preview-toolbar"> <h2><span class="icon">L</span>Preview</h2> </div> </div> </div> <script type="text/javascript" src="zen_codemirror.js"></script> <div id="ide"> <div id="editor"> <div class="container"><textarea name="" id="editor-area" cols="30" rows="10"></textarea></div> </div> <div id="preview"> <div class="container"><iframe src="" frameborder="0"id="preview-area" ></iframe></div> </div> </div> <script type="text/javascript"> var delay; var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), { mode: 'text/html', tabSize:8, lineNumbers:true, onChange: function() { clearTimeout(delay); delay = setTimeout(updatePreview, 0); }, onKeyEvent: function() { return zen_editor.handleKeyEvent.apply(zen_editor, arguments); } }); function updatePreview() { var previewFrame = document.getElementById('preview-area'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 0); Downloadify.create('download',{ filename: "index.html", data: function(){ return editor.getValue(); }, onComplete: function(){ alert('Your file has been saved!'); }, onCancel: function(){ alert('You have cancelled the saving of this file.'); }, onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); }, transparent: false, swf: 'downloadify.swf', downloadImage:'download.png', width: 100, height: 30, transparent: true, append: false }); </script> </body> </html> Edited July 19, 2017 by andriprasetiya Link to comment Share on other sites More sharing options...
justsomeguy Posted July 19, 2017 Share Posted July 19, 2017 What does "not working" mean, what do you expect it to do and what actually happens? Are you checking your browser's developer console for errors? Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 live preview is not working !!! Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 (edited) look in this link, why the preview area isn't working, what the wrong of javascript code Edited July 19, 2017 by andriprasetiya Link to comment Share on other sites More sharing options...
justsomeguy Posted July 19, 2017 Share Posted July 19, 2017 Do you have a regular link instead of an embed? Also, you should work on making your thread titles descriptive. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 19, 2017 Share Posted July 19, 2017 OK, you answered one out of three. What exactly happens when you run it? Are there error messages in the developer console? How about in the network console, is there anything listed as not loading? You'll find that you get better answers when you ask better questions. If you make it easy for people to help you then people will be more likely to help you. Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 2 minutes ago, justsomeguy said: Do you have a regular link instead of an embed? Also, you should work on making your thread titles descriptive. I trying a live HTML editor and, I having a problem, this is preview area isn't working Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 12 minutes ago, justsomeguy said: Do you have a regular link instead of an embed? Also, you should work on making your thread titles descriptive. Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 19, 2017 Author Share Posted July 19, 2017 (edited) 58 minutes ago, justsomeguy said: OK, you answered one out of three. What exactly happens when you run it? Are there error messages in the developer console? How about in the network console, is there anything listed as not loading? You'll find that you get better answers when you ask better questions. If you make it easy for people to help you then people will be more likely to help you. LOOK why the live preview isn't working, what the wrong of the javascript code? Edited July 19, 2017 by andriprasetiya Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 20, 2017 Author Share Posted July 20, 2017 LOOK why the live preview isn't working, what the wrong of the javascript code? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 20, 2017 Share Posted July 20, 2017 That's still an embedded codepen thing, not just a link to the site. From what I can tell it looks like that onChange function does not get executed, if I add some console.log statements I don't see them. I don't know why though, I don't know what that CodeMirror is. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 20, 2017 Share Posted July 20, 2017 Please do not create duplicate topics. I've merged all of your topics about the same issue here, let's keep the discussion in one place. Link to comment Share on other sites More sharing options...
andriprasetiya Posted July 20, 2017 Author Share Posted July 20, 2017 6 hours ago, justsomeguy said: That's still an embedded codepen thing, not just a link to the site. From what I can tell it looks like that onChange function does not get executed, if I add some console.log statements I don't see them. I don't know why though, I don't know what that CodeMirror is. coder mirror is same as text editor Link to comment Share on other sites More sharing options...
justsomeguy Posted July 21, 2017 Share Posted July 21, 2017 I understand what the purpose is, but I don't know why that onChange function isn't running because I haven't looked up any documentation about how to use it, who makes it, looked for examples, etc. I would suggest looking for some documentation about how to use it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now