i'm trying create html/css/javascript online editor people try small code , stuff that. pretty simple.. create 2 div's 1 textarea id="input" , other div id="output" , create js function push content of input output either pressing button or make live running function every 2 seconds or ran code , worked fine html , css once tried create function inside <script> tags inside textarea didn't run.. doesn't exist.. can run small functions using button if wrote actions inside onclick define function , run button not working
window.setinterval(function(){ var y = document.getelementbyid("automatic").checked if (y==1){ editorfunction() } }, 1000); function editorfunction(){ var x = document.getelementbyid("input").value; document.getelementbyid("output").innerhtml = x; } my question is.. there way around ? want page stay static.. don't want have send content database , make new form , render on page.. wanna keep simple possible asked html.. don't think it's important here is:
<body id="body"> <section class="container"> <div class="row"> <div class="col-sm-6"> <textarea class="col-sm-12" id="input"></textarea> </div> <div class="col-sm-6"> <div class="col-sm-12" id="output"></div> </div> </div> </section> <section> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <button onclick="editorfunction()">run</button> <input type="checkbox" id="automatic" checked>submit changes live</input> </div> </div> </section> </body> eval() work when want execute action.. can't define function stay later use
you need specially handle <script> tags. content inserted text (e.g. innerhtml) excluded having scripts run. security reasons.
you can insert text innerhtml, go through deleting inserted <script> tags while creating new ones using document.createelement('script') in add textcontent of script tag deleting. insert newly created <script> tag document
window.setinterval(function(){ var y = document.getelementbyid("automatic").checked if (y==1){ editorfunction() } }, 1000); function editorfunction(){ var x = document.getelementbyid("input").value; var outputel = document.getelementbyid("output"); outputel.innerhtml = x; //get nodelist of <script> elements var scripts = outputel.queryselectorall('script'); for(var i=0;i<scripts.length;i++){ var oldscript = scripts[i]; var newscript = document.createelement('script'); //copy actual script newscript.textcontent = oldscript.textcontent; //copy oldscripts attributes var attrs = oldscript.attributes; for(var j=0;j<attrs.length;j++){ newscript.setattribute(attrs[j],oldscript.getattribute(attrs[j])); } //replace non-functional oldscript newscript oldscript.parentnode.replacechild(newscript,oldscript); } }<body id="body"> <section class="container"> <div class="row"> <div class="col-sm-6"> <textarea class="col-sm-12" id="input"></textarea> </div> <div class="col-sm-6"> <div class="col-sm-12" id="output"></div> </div> </div> </section> <section> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <button onclick="editorfunction()">run</button> <input type="checkbox" id="automatic" checked>submit changes live</input> </div> </div> </section> </body>suggested changes:
- use event handler, not interval timer:
- i implement different method of having output automatically updated. if going have output follow input, should use event handler, not interval timer.
- automatically disable live/auto updates when script exists.
- try first snippet "live" enabled ,
<script>console.log('this test');</script>repeatedly output console.
- try first snippet "live" enabled ,
var detectscriptregexp = /<script/ig; document.getelementbyid("input").addeventlistener('input',function(){ var autocheckboxel = document.getelementbyid("automatic"); if (autocheckboxel.checked==true){ editorfunction(); }else if (autocheckboxel.disabled==true){ detectscriptregexp.lastindex=0; //clear regexp if(!detectscriptregexp.test(document.getelementbyid("input").value)){ //don't lock out live if there no <script> autocheckboxel.disabled=false; } } }, false); function editorfunction(){ var autocheckboxel = document.getelementbyid("automatic"); autocheckboxel.disabled = false; var x = document.getelementbyid("input").value; var outputel = document.getelementbyid("output"); outputel.innerhtml = x; //get nodelist of <script> elements var scripts = outputel.queryselectorall('script'); for(var i=0;i<scripts.length;i++){ var oldscript = scripts[i]; var newscript = document.createelement('script'); //copy actual script newscript.textcontent = oldscript.textcontent; //copy oldscripts attributes var attrs = oldscript.attributes; for(var j=0;j<attrs.length;j++){ newscript.setattribute(attrs[j],oldscript.getattribute(attrs[j])); } //replace non-functional oldscript newscript oldscript.parentnode.replacechild(newscript,oldscript); //disable auto/live updates when there scripts. // needed, @ least in snippet. if use console.log() // checkbox rapidly covered. autocheckboxel.checked = false; autocheckboxel.disabled = true; } }<body id="body"> <section class="container"> <div class="row"> <div class="col-sm-6"> <textarea class="col-sm-12" id="input"></textarea> </div> <div class="col-sm-6"> <div class="col-sm-12" id="output"></div> </div> </div> </section> <section> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <button onclick="editorfunction()">run</button> <input type="checkbox" id="automatic" checked>submit changes live</input> </div> </div> </section> <!-- lines can scroll snippet in case console output covers controls--> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body>
Comments
Post a Comment