在线可视化编辑源码

2017年6月22日13:17:57 6 2,606

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

在线可视化编辑源码

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

测试

教程:新建一个文件,可html,php后缀,复制下面代码放入访问域名+新建文件全称。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>在线可视化编辑-诗梦</title>
  6.   <link rel="shortcut icon" href="https://m.mom1.cn/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(https://www.mom1.cn/wp-content/uploads/2017/06/SFGFGD.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://www.mom1.cn" style="color: #fff;">MOM1.CN</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"><DOCTYPE HTML>
  50. <html>
  51.     <head>
  52.         <title>诗梦-个人博客引导单页</title>
  53.       <link rel="shortcuticon" href="https://m.mom1.cn/favicon.ico" />
  54.         <meta charset="utf-8" />
  55.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  56.         <!--[if lte IE 8]><script src="https://m.mom1.cn/js/html5shiv.js"></script><![endif]-->
  57.       <link rel="stylesheet" href="https://m.mom1.cn/css/main.css" />
  58.         <!--[if lte IE 9]><link rel="stylesheet" href="https://m.mom1.cn/css/ie9.css" /><![endif]-->
  59.         <!--[if lte IE 8]><link rel="stylesheet" href="https://m.mom1.cn/css/ie8.css" /><![endif]-->
  60.         <noscript><link rel="stylesheet" href="https://m.mom1.cn/css/noscript.css" /></noscript>
  61.     </head>
  62.     <body class="is-loading">
  63.         <!-- Wrapper -->
  64.             <div id="wrapper">
  65.                 <!-- Main -->
  66.                     <section id="main">
  67.                         <header>
  68.                             <span class="avatar"><img src="https://q2.qlogo.cn/headimg_dl?dst_uin=23113497&spec=100" alt="" /></span>
  69.                             <h1>诗梦</h1>
  70.                             <p>也许,只有真正动心了。才会为他所做的一件小事 在旁人看来无所谓,而在她看来却是心碎。</p>
  71.                         </header>
  72.                         <footer>
  73.                             <ul class="icons">
  74.                                 <li><a href="https://www.mom1.cn" class="fa-home">首页</a></li>
  75.                                 <li><a href="https://wpa.qq.com/msgrd?v=3&uin=23113497&site=qq&menu=yes" class="fa-qq">QQ</a></li>
  76.                                 <li><a href="https://weibo.com/" class="fa-weibo">微博</a></li>
  77.                             </ul>
  78.                         </footer>
  79.                     </section>
  80.                 <!-- Footer -->
  81.                     <footer id="footer">
  82.                         <ul class="copyright">
  83.                             <li>&copy; <a href="https://www.mom1.cn">诗梦博客</a>.版权所有</li>
  84.                         </ul>
  85.                     </footer>
  86.             </div>
  87.         <!-- Scripts -->
  88.             <!--[if lte IE 8]><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->
  89.             <script>
  90.                 if ('addEventListener' in window) {
  91.                     window.addEventListener('load', function() { documentdocument.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
  92.                     document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
  93.                 }
  94.             </script>
  95.       <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'https://www.mom1.cn/m1/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script><script>
  96. var _hmt_hmt = _hmt || [];
  97. (function() {
  98.   var hm = document.createElement("script");
  99.   hm.src = "https://hm.baidu.com/hm.js?2b6c2a9b09256a9e163b63e37857bb6f";
  100.   var s = document.getElementsByTagName("script")[0];
  101.   s.parentNode.insertBefore(hm, s);
  102. })();
  103. </script>
  104.     </body>
  105. </html></textarea>
  106.         </div>
  107.     </div>
  108.     </div>
  109.     <div class="col-sm-12">
  110.     <div class="panel panel-default">
  111.         <div class="panel-heading"><form class="form-inline"> <button type="button" class="btn btn-default">运行结果</button></form></div>
  112.         <div class="panel-body"><div id="iframewrapper"></div></div>
  113.     </div>
  114.     </div>
  115.     </div>
  116.     <footer>
  117.         <div class="row">
  118.             <div class="col-lg-12"><hr>
  119.                 <p>Copyright © 2013-2017<a target="_blank" href="//www.mom1.cn/">诗梦</a></p>
  120.             </div>
  121.         </div>
  122.     </footer>
  123. </div>
  124. <script>
  125. var mixedMode = {
  126. name: "htmlmixed",
  127. scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
  128.                mode: null},
  129.               {matches: /(text|application)\/(x-)?vb(a|script)/i,
  130.                mode: "vbscript"}]
  131. };
  132. var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
  133.     mode: mixedMode,
  134.     selectionPointer: true,
  135.     lineNumbers: false,
  136.     matchBrackets: true,
  137.     indentUnit: 4,
  138.     indentWithTabs: true
  139. });
  140. window.addEventListener("resize", autodivheight);
  141. var x = 0;
  142. function autodivheight(){
  143.     var winHeight=0;
  144.     if (window.innerHeight) {
  145.         winHeight = window.innerHeight;
  146.     } else if ((document.body) && (document.body.clientHeight)) {
  147.         winHeight = document.body.clientHeight;
  148.     }
  149.     //通过深入Document内部对body进行检测,获取浏览器窗口高度
  150.     if (document.documentElement && document.documentElement.clientHeight) {
  151.         winHeight = document.documentElement.clientHeight;
  152.     }
  153.     height = winHeight*0.3
  154.     editor.setSize('100%', height);
  155.     document.getElementById("iframeResult").style.height= height + "px";
  156. }
  157. function submitTryit() {
  158.   var text = editor.getValue();
  159.   var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im
  160.   var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
  161.   var array_matches_head = patternHead.exec(text);
  162.   var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
  163.   var array_matches_body = patternBody.exec(text);
  164.   var basepath_flag = 0;
  165.   var basepath = '';
  166.   if(basepath_flag) {
  167.     basepath = '<base href="//www.runoob.com/try/demo_source/" target="_blank">';
  168.   }
  169.   if(array_matches_head) {
  170.     texttext = text.replace('<head>', '<head>' + basepath );
  171.   } else if (patternHtml) {
  172.     texttext = text.replace('<html>', '<head>' + basepath + '</head>');
  173.   } else if (array_matches_body) {
  174.     texttext = text.replace('<body>', '<body>' + basepath );
  175.   } else {
  176.     text = basepath + text;
  177.   }
  178.   var ifr = document.createElement("iframe");
  179.   ifr.setAttribute("frameborder", "0");
  180.   ifr.setAttribute("id", "iframeResult");
  181.   document.getElementById("iframewrapper").innerHTML = "";
  182.   document.getElementById("iframewrapper").appendChild(ifr);
  183.   var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
  184.   ifrw.document.open();
  185.   ifrw.document.write(text);
  186.   ifrw.document.close();
  187.   autodivheight();
  188. }
  189. submitTryit();
  190. autodivheight();
  191. </script>
  192. </div></body>
  193. </html>
广告也精彩
诗梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

私信 签到

目前评论:6   其中:访客  5   博主  1

    • avatar 跨境电商培训 来自天朝的朋友 火狐浏览器 Windows 10 江苏省常州市 电信 1

      留名收藏,肯定有用的

      • avatar 森七 来自天朝的朋友 谷歌浏览器  Android 5.1.1 vivo X7 Build/LMY47V 陕西省西安市 电信 1

        不错不错

        • avatar queensland-assignment.com/essay-services-for-chinese-students/ 来自天朝的朋友 火狐浏览器 Windows 10 广西南宁市 联通 0

          支持楼主。

          • avatar 大海潮涌 来自天朝的朋友 谷歌浏览器 Windows 7 河北省石家庄市 联通 0

            弄了一下,没成功~~对方不想跟你说话并向你丢了一朵小黄花 :twisted:

            • avatar 子成君 来自天朝的朋友 谷歌浏览器 Linux 广东省广州市 电信 1

              很有用的东西 带走了 谢谢分享((*・∀・)ゞ

                • avatar 诗梦 博主 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 11_2_2 like Mac OS X) AppleWebKit 广东省广州市 电信

                  @子成君 有用就多来看看哦