HTML/PHP在线可视化编辑源码

沃森博客
沃森博客
沃森博客
1421
文章
9
评论
2017年9月18日08:54:44JS/jQuery评论1,366阅读模式

HTML/PHP在线可视化编辑支持外链，支持html,php等，扒来的。

特点

在线修改代码，源码只有一个html，其它外链都是Bootstrap的。

教程

新建一个文件，可html,php后缀，复制下面代码保存上传网站空间。

效果

访问wosn.net/tools/edit.html

代码

  1. <!DOCTYPE?html>
  2. <html>
  3. <head>
  4. ????<meta?charset="utf-8">
  5. ????<title>HTML/PHP在线可视化编辑-?沃森博客</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">源代码：</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>?点击运行</button>
  44. ????????????</div>
  45. ????????</div>
  46. ????????????</form>
  47. ????????</div>
  48. ????????<div?class="panel-body">
  49. ????????????<textarea?class="form-control"??id="textareaCode"?name="textareaCode">
  50. 化编辑支持外链，支持html,php等
  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">运行结果</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/">沃森博客</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. ????//通过深入Document内部对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：支持一下沃森博客，请点这里一下！

沃森博客
  • 本文由 发表于 2017年9月18日08:54:44
  • 本文来自互利网收集整理，问题反馈联系邮箱：wosnnet@foxmail.com，转载请务必保留本文链接：https://wosn.net/606.html

发表评论