HTML/PHP online visual editing source code

Watson Blog
Watson Blog
Watson Blog
one thousand four hundred and twenty-one
article
nine
comment
September 18, 2017 08:54:44 JS/jQuery comment 1,366 Reading mode

HTML/PHP online visual editing supports external links, html, php, etc.

characteristic

Modify the code online. The source code has only one html, and other external links are all Bootstrap.

course

Create a new file with html and php suffixes. Copy the following code to save the upload website space.

effect

visit wosn.net/tools/edit.html

code

  1. <! DOCTYPE?html>
  2. <html>
  3. <head>
  4. ????< meta?charset= "utf-8" >
  5. ????< Title>HTML/PHP Online Visual Editing -? Watson Blog</title>
  6. ??< link?rel= "shortcut?icon" ? href= " https://pic.wosn.net/favicon.png " ?/>
  7. ????< meta?name= "viewport" ? content= "width=device-width,?initial-scale=1.0" >
  8. ????< link?rel= "stylesheet" ? href= "//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  9. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.js" ></script>
  10. ????< link?rel= "stylesheet" ? href= "//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.css" >
  11. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/mode/htmlmixed/htmlmixed.min.js" ></script>
  12. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/mode/css/css.min.js" ></script>
  13. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/mode/javascript/javascript.min.js" ></script>
  14. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/mode/xml/xml.min.js" ></script>
  15. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closetag.min.js" ></script>
  16. ????< script?src= "//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closebrackets.min.js" ></script>
  17. ????<!-- [ if ? lt?IE?9]>
  18. ????< script?src= "//cdn.bootcss.com/html5shiv/r29/html5.min.js" ></script>
  19. ????<! [endif]-->
  20. </head>
  21. <body>
  22. <style>
  23. 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( http://pic.wosn.net/blog/170918/KAAG6G7ljI.png ); background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block}
  24. </style>
  25. <nav? class = "navbar?navbar-default?navbar-fixed-top" ? style= "background:?#96b97d;" >
  26. ??????< div? class = "container" >
  27. ????????< div? class = "navbar-header?logo" ><h1>
  28. ??????????< a? class = "navbar-brand" ? target= "_blank" ? href= " http://wosn.net " ? style= "color:?#ff0000;" >WOSN. NET</a></h1>
  29. ????????</ div>
  30. ??????</ div>
  31. ????</ nav>
  32. ????< div? class = "container" ?>
  33. ????< div? class = "row" >
  34. ????< div? class = "col-sm-12" >
  35. ????< div? class = "panel?panel-default" >
  36. ????????< div? class = "panel-heading" >
  37. ????????????< form? class = "form-inline" >
  38. ????????< div? class = "row" >
  39. ????????????< div? class = "col-xs-6" >
  40. ?????????????????< button?type= "button" ? class = "btn?btn-default" >Source code:</button>
  41. ??????????????</ div>
  42. ??????????????< div? class = "col-xs-6?text-right" >
  43. ????????????????< button?type= "button" ? class = "btn?btn-success" ? onclick= "submitTryit()" ? id= "submitBTN" ><span? class = "glyphicon?glyphicon-send" ></span>? Click Run</button>
  44. ????????????</ div>
  45. ????????</ div>
  46. ????????????</ form>
  47. ????????</ div>
  48. ????????< div? class = "panel-body" >
  49. ????????????< textarea? class = "form-control" ?? id= "textareaCode" ? name= "textareaCode" >
  50. Editing supports external links, html, php, etc
  51. ????????</ textarea>
  52. ????????</ div>
  53. ????</ div>
  54. ????</ div>
  55. ????< div? class = "col-sm-12" >
  56. ????< div? class = "panel?panel-default" >
  57. ????????< div? class = "panel-heading" ><form? class = "form-inline" >?< button?type= "button" ? class = "btn?btn-default" >Running results</button></form></div>
  58. ????????< div? class = "panel-body" ><div? id= "iframewrapper" ></div></div>
  59. ????</ div>
  60. ????</ div>
  61. ????</ div>
  62. ????< footer>
  63. ????????< div? class = "row" >
  64. ????????????< div? class = "col-lg-12" ><hr>
  65. ????????????????< p>Copyright???2013-2017<a?target= "_blank" ? href= "//wosn.net/" >Watson Blog</a></p>
  66. ????????????</ div>
  67. ????????</ div>
  68. ????</ footer>
  69. </div>
  70. <script>
  71. var ? mixedMode?=? {
  72. name:? "htmlmixed" ,
  73. scriptTypes:? [{matches:?/\/x-handlebars-template|\/x-mustache/i,
  74. ??????????????? mode:? null },
  75. ?????????????? {matches:?/(text|application)\/(x-)?vb(a|script)/i,
  76. ??????????????? mode:? "vbscript" }]
  77. };
  78. var ? editor?=?CodeMirror.fromTextArea(document.getElementById( "textareaCode" ),? {
  79. ???? mode:?mixedMode,
  80. ???? selectionPointer:? true ,
  81. ???? lineNumbers:? false ,
  82. ???? matchBrackets:? true ,
  83. ???? indentUnit:?4,
  84. ???? indentWithTabs:? true
  85. });
  86. window.addEventListener( "resize" ,? autodivheight);
  87. var ? x?=?0;
  88. function ? autodivheight(){
  89. ???? var ? winHeight=0;
  90. ???? if ? (window.innerHeight)? {
  91. ???????? winHeight?=?window.innerHeight;
  92. ????}? else ? if ? ((document.body)?&&? (document.body.clientHeight))? {
  93. ???????? winHeight?=?document.body.clientHeight;
  94. ????}
  95. ???? //Get the height of the browser window by going deep into the document to detect the body
  96. ???? if ? (document.documentElement?&&? document.documentElement.clientHeight)? {
  97. ???????? winHeight?=?document.documentElement.clientHeight;
  98. ????}
  99. ???? height?=?winHeight*0.3
  100. ???? editor.setSize('100%',? height);
  101. ???? document.getElementById( "iframeResult" ).style.height=? height?+? "px" ;
  102. }
  103. function ? submitTryit()? {
  104. ?? var ? text?=?editor.getValue();
  105. ?? var ? patternHtml?=?/<html[^>]*>((.|[\n\r])*)<\/html>/im
  106. ?? var ? patternHead?=?/<head[^>]*>((.|[\n\r])*)<\/head>/im
  107. ?? var ? array_matches_head?=?patternHead.exec(text);
  108. ?? var ? patternBody?=?/<body[^>]*>((.|[\n\r])*)<\/body>/im;
  109. ?? var ? array_matches_body?=?patternBody.exec(text);
  110. ?? var ? basepath_flag?=?0;
  111. ?? var ? basepath?=? '' ;
  112. ?? if (basepath_flag)? {
  113. ???? basepath?=?'<base?href= "//www.runoob.com/try/demo_source/" ? target= "_blank" >';
  114. ??}
  115. ?? if (array_matches_head)? {
  116. ???? texttext?=?text.replace('<head>',?'< head>'?+?basepath?);
  117. ??}? else ? if ? (patternHtml)? {
  118. ???? texttext?=?text.replace('<html>',?'< head>'?+?basepath?+?'</head>');
  119. ??}? else ? if ? (array_matches_body)? {
  120. ???? texttext?=?text.replace('<body>',?'< body>'?+?basepath?);
  121. ??}? else ? {
  122. ???? text?=?basepath?+?text;
  123. ??}
  124. ?? var ? ifr?=?document.createElement( "iframe" );
  125. ?? ifr.setAttribute( "frameborder" ,? "0" );
  126. ?? ifr.setAttribute( "id" ,? "iframeResult" );
  127. ?? document.getElementById( "iframewrapper" ).innerHTML?=? "" ;
  128. ?? document.getElementById( "iframewrapper" ).appendChild(ifr);
  129. ?? var ? ifrw?=? (ifr.contentWindow)??? ifr.contentWindow?:? (ifr.contentDocument.document)??? ifr.contentDocument.document?:?ifr.contentDocument;
  130. ?? ifrw.document.open();
  131. ?? ifrw.document.write(text);
  132. ?? ifrw.document.close();
  133. ?? autodivheight();
  134. }
  135. submitTryit();
  136. autodivheight();
  137. </script>
  138. </div></body>
  139. </html>

AD ： Please click here to support Watson's blog!

Watson Blog
  • This article is written by Published on September 18, 2017 08:54:44
  • This article is collected and sorted by the website of Mutual Benefit, and the email address for problem feedback is: wosnnet@foxmail.com , please keep the link of this article for reprinting: https://wosn.net/606.html

Comment