MENU

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

HTML/PHP在线可视化编辑支持外链,支持html/php

效果图:

8b551559468916.jpg


使用方法:

新建一个html或者php后缀的文件,把下面代码复制进去即可。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>在线可视化编辑- 梦城博客</title>
      <link rel="shortcut icon" href="https://www.dcqzz.cn/favicon.ico" />
        <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(http://www.dcqzz.cn/qzz/logo.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: #5BC0DE;">
          <div class="container">
            <div class="navbar-header logo">
              <h1><a class="navbar-brand" target="_blank" href="//www.dcqzz.cn" style="color: #ff0000;">DCQZZ.CN</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>Copyright © 2013-2017<a target="_blank" href="https://www.dcqzz.cn">梦城博客</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>
0:00