在线编辑代码HTML/PHP，可以实现单页可视化源码，在线修改代码，源码只有一个html，其它外链都是Bootstrap的。
具体使用：新建一个文件，改成html，php后缀，复制下面代码保存上传网站空间。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>在线可视化编辑- SOUJIZ.COM</title><link rel="shortcut icon" href="favicon.png" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.js"></script><link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.css"><script src="//cdn.bootcss.com/codemirror/5.2.0/mode/htmlmixed/htmlmixed.min.js"></script><script src="//cdn.bootcss.com/codemirror/5.2.0/mode/css/css.min.js"></script><script src="//cdn.bootcss.com/codemirror/5.2.0/mode/javascript/javascript.min.js"></script><script src="//cdn.bootcss.com/codemirror/5.2.0/mode/xml/xml.min.js"></script><script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closetag.min.js"></script><script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closebrackets.min.js"></script><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script><![endif]--></head><body><style>body{min-height:150px;padding-top:90px;background: #f6f6f6;}.container{width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.CodeMirror{min-height:150px}#textareaCode{min-height:150px}#iframeResult{border:0!important;min-width:100px;width:100%;min-height:150px;background-color:#fff}@media screen and (max-width:768px){#textareaCode{height:300px}.CodeMirror{height:300px}#iframeResult{display: block;overflow: hidden;height:300px}.form-inline{padding:6px 0 2px 0}}.logo h1{background-image:url(https://tools.ly522.com/images/KAAG6G7ljI.png);background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block}</style><nav class="navbar navbar-default navbar-fixed-top" style="background: #96b97d;"><div class="container"><div class="navbar-header logo"><h1> <a class="navbar-brand" target="_blank" href="https://www.soujiz.com" style="color: #ff0000;">soujiz</a></h1></div></div></nav><div class="container" ><div class="row"><div class="col-sm-12"><div class="panel panel-default"><div class="panel-heading"><form class="form-inline"><div class="row"><div class="col-xs-6"><button type="button" class="btn btn-default">源代码：</button></div><div class="col-xs-6 text-right"><button type="button" class="btn btn-success" onclick="submitTryit()" id="submitBTN"><span class="glyphicon glyphicon-send"></span> 点击运行</button></div></div></form></div><div class="panel-body"><textarea class="form-control" id="textareaCode" name="textareaCode">在线可视化编辑支持外链，支持html,php等</textarea></div></div></div><div class="col-sm-12"><div class="panel panel-default"><div class="panel-heading"><form class="form-inline"> <button type="button" class="btn btn-default">运行结果</button></form></div><div class="panel-body"><div id="iframewrapper"></div></div></div></div></div><footer><div class="row"><div class="col-lg-12"><hr><p>Copyright2021<a target="_blank" href="//soujiz.com/">大雄搜集站</a></p></div></div></footer></div><script>var mixedMode = {name: "htmlmixed",scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,mode: null},{matches: /(text|application)\/(x-)?vb(a|script)/i,mode: "vbscript"}]};var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {mode: mixedMode,selectionPointer: true,lineNumbers: false,matchBrackets: true,indentUnit: 4,indentWithTabs: true});window.addEventListener("resize", autodivheight);var x = 0;function autodivheight(){var winHeight=0;if (window.innerHeight) {winHeight = window.innerHeight;} else if ((document.body) && (document.body.clientHeight)) {winHeight = document.body.clientHeight;}//通过深入Document内部对body进行检测，获取浏览器窗口高度if (document.documentElement && document.documentElement.clientHeight) {winHeight = document.documentElement.clientHeight;}height = winHeight*0.3editor.setSize('100%', height);document.getElementById("iframeResult").style.height= height + "px";}function submitTryit() {var text = editor.getValue();var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/imvar patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/imvar array_matches_head = patternHead.exec(text);var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;var array_matches_body = patternBody.exec(text);var basepath_flag = 0;var basepath = '';if(basepath_flag) {basepath = '<base href="//www.runoob.com/try/demo_source/" target="_blank">';}if(array_matches_head) {texttext = text.replace('<head>', '<head>' + basepath );} else if (patternHtml) {texttext = text.replace('<html>', '<head>' + basepath + '</head>');} else if (array_matches_body) {texttext = text.replace('<body>', '<body>' + basepath );} else {text = basepath + text;}var ifr = document.createElement("iframe");ifr.setAttribute("frameborder", "0");ifr.setAttribute("id", "iframeResult");document.getElementById("iframewrapper").innerHTML = "";document.getElementById("iframewrapper").appendChild(ifr);var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;ifrw.document.open();ifrw.document.write(text);ifrw.document.close();autodivheight();}submitTryit();autodivheight();</script></div></body></html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线可视化编辑- SOUJIZ.COM</title> <link rel="shortcut icon" href="favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.js"></script> <link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.css"> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/htmlmixed/htmlmixed.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/css/css.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/javascript/javascript.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/xml/xml.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closetag.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closebrackets.min.js"></script> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script> <![endif]--> </head> <body> <style> body{min-height:150px;padding-top:90px;background: #f6f6f6;}.container{width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.CodeMirror{min-height:150px}#textareaCode{min-height:150px}#iframeResult{border:0!important;min-width:100px;width:100%;min-height:150px;background-color:#fff}@media screen and (max-width:768px){#textareaCode{height:300px}.CodeMirror{height:300px}#iframeResult{display: block;overflow: hidden;height:300px}.form-inline{padding:6px 0 2px 0}}.logo h1{background-image:url(https://tools.ly522.com/images/KAAG6G7ljI.png);background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block} </style> <nav class="navbar navbar-default navbar-fixed-top" style="background: #96b97d;"> <div class="container"> <div class="navbar-header logo"> <h1> <a class="navbar-brand" target="_blank" href="https://www.soujiz.com" style="color: #ff0000;">soujiz</a></h1> </div> </div> </nav> <div class="container" > <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading"> <form class="form-inline"> <div class="row"> <div class="col-xs-6"> <button type="button" class="btn btn-default">源代码：</button> </div> <div class="col-xs-6 text-right"> <button type="button" class="btn btn-success" onclick="submitTryit()" id="submitBTN"><span class="glyphicon glyphicon-send"></span> 点击运行</button> </div> </div> </form> </div> <div class="panel-body"> <textarea class="form-control" id="textareaCode" name="textareaCode"> 在线可视化编辑支持外链，支持html,php等 </textarea> </div> </div> </div> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading"><form class="form-inline"> <button type="button" class="btn btn-default">运行结果</button></form></div> <div class="panel-body"><div id="iframewrapper"></div></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"><hr> <p>Copyright2021<a target="_blank" href="//soujiz.com/">大雄搜集站</a></p> </div> </div> </footer> </div> <script> var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), { mode: mixedMode, selectionPointer: true, lineNumbers: false, matchBrackets: true, indentUnit: 4, indentWithTabs: true }); window.addEventListener("resize", autodivheight); var x = 0; function autodivheight(){ var winHeight=0; if (window.innerHeight) { winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientHeight)) { winHeight = document.body.clientHeight; } //通过深入Document内部对body进行检测，获取浏览器窗口高度 if (document.documentElement && document.documentElement.clientHeight) { winHeight = document.documentElement.clientHeight; } height = winHeight*0.3 editor.setSize('100%', height); document.getElementById("iframeResult").style.height= height + "px"; } function submitTryit() { var text = editor.getValue(); var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im var array_matches_head = patternHead.exec(text); var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var array_matches_body = patternBody.exec(text); var basepath_flag = 0; var basepath = ''; if(basepath_flag) { basepath = '<base href="//www.runoob.com/try/demo_source/" target="_blank">'; } if(array_matches_head) { texttext = text.replace('<head>', '<head>' + basepath ); } else if (patternHtml) { texttext = text.replace('<html>', '<head>' + basepath + '</head>'); } else if (array_matches_body) { texttext = text.replace('<body>', '<body>' + basepath ); } else { text = basepath + text; } var ifr = document.createElement("iframe"); ifr.setAttribute("frameborder", "0"); ifr.setAttribute("id", "iframeResult"); document.getElementById("iframewrapper").innerHTML = ""; document.getElementById("iframewrapper").appendChild(ifr); var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument; ifrw.document.open(); ifrw.document.write(text); ifrw.document.close(); autodivheight(); } submitTryit(); autodivheight(); </script> </div></body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线可视化编辑- SOUJIZ.COM</title> <link rel="shortcut icon" href="favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.js"></script> <link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.css"> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/htmlmixed/htmlmixed.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/css/css.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/javascript/javascript.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/mode/xml/xml.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closetag.min.js"></script> <script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closebrackets.min.js"></script> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script> <![endif]--> </head> <body> <style> body{min-height:150px;padding-top:90px;background: #f6f6f6;}.container{width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.CodeMirror{min-height:150px}#textareaCode{min-height:150px}#iframeResult{border:0!important;min-width:100px;width:100%;min-height:150px;background-color:#fff}@media screen and (max-width:768px){#textareaCode{height:300px}.CodeMirror{height:300px}#iframeResult{display: block;overflow: hidden;height:300px}.form-inline{padding:6px 0 2px 0}}.logo h1{background-image:url(https://tools.ly522.com/images/KAAG6G7ljI.png);background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block} </style> <nav class="navbar navbar-default navbar-fixed-top" style="background: #96b97d;"> <div class="container"> <div class="navbar-header logo"> <h1> <a class="navbar-brand" target="_blank" href="https://www.soujiz.com" style="color: #ff0000;">soujiz</a></h1> </div> </div> </nav> <div class="container" > <div class="row"> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading"> <form class="form-inline"> <div class="row"> <div class="col-xs-6"> <button type="button" class="btn btn-default">源代码：</button> </div> <div class="col-xs-6 text-right"> <button type="button" class="btn btn-success" onclick="submitTryit()" id="submitBTN"><span class="glyphicon glyphicon-send"></span> 点击运行</button> </div> </div> </form> </div> <div class="panel-body"> <textarea class="form-control" id="textareaCode" name="textareaCode"> 在线可视化编辑支持外链，支持html,php等 </textarea> </div> </div> </div> <div class="col-sm-12"> <div class="panel panel-default"> <div class="panel-heading"><form class="form-inline"> <button type="button" class="btn btn-default">运行结果</button></form></div> <div class="panel-body"><div id="iframewrapper"></div></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"><hr> <p>Copyright2021<a target="_blank" href="//soujiz.com/">大雄搜集站</a></p> </div> </div> </footer> </div> <script> var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), { mode: mixedMode, selectionPointer: true, lineNumbers: false, matchBrackets: true, indentUnit: 4, indentWithTabs: true }); window.addEventListener("resize", autodivheight); var x = 0; function autodivheight(){ var winHeight=0; if (window.innerHeight) { winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientHeight)) { winHeight = document.body.clientHeight; } //通过深入Document内部对body进行检测，获取浏览器窗口高度 if (document.documentElement && document.documentElement.clientHeight) { winHeight = document.documentElement.clientHeight; } height = winHeight*0.3 editor.setSize('100%', height); document.getElementById("iframeResult").style.height= height + "px"; } function submitTryit() { var text = editor.getValue(); var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im var array_matches_head = patternHead.exec(text); var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var array_matches_body = patternBody.exec(text); var basepath_flag = 0; var basepath = ''; if(basepath_flag) { basepath = '<base href="//www.runoob.com/try/demo_source/" target="_blank">'; } if(array_matches_head) { texttext = text.replace('<head>', '<head>' + basepath ); } else if (patternHtml) { texttext = text.replace('<html>', '<head>' + basepath + '</head>'); } else if (array_matches_body) { texttext = text.replace('<body>', '<body>' + basepath ); } else { text = basepath + text; } var ifr = document.createElement("iframe"); ifr.setAttribute("frameborder", "0"); ifr.setAttribute("id", "iframeResult"); document.getElementById("iframewrapper").innerHTML = ""; document.getElementById("iframewrapper").appendChild(ifr); var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument; ifrw.document.open(); ifrw.document.write(text); ifrw.document.close(); autodivheight(); } submitTryit(); autodivheight(); </script> </div></body> </html>
© 版权声明
THE END
![WordPress网站&子比主题模板美化教程汇总篇[已更43]-大雄搜集站](https://soujiz.com/wp-content/uploads/2022/07/20220730131246-300x132.jpg)
![WordPress添加一个音乐播放提示弹窗教程[子比美化]-大雄搜集站](https://soujiz.com/wp-content/uploads/2022/09/dce1d85630b7-300x141.jpg)
![表情[zhemo]-大雄搜集站](https://soujiz.com/wp-content/themes/zibll/img/smilies/zhemo.gif)
暂无评论内容