n

在线可视化编辑源码

作者 : 凡酷官方 发布时间: 2019-10-7 文章热度:283 共7426个字,阅读需19分钟。 本文内容有更新 隐藏侧边 显示侧边

在线可视化编辑源码-凡酷网  (fankuw.cn)  -  综合性资源分享平台网站

html边修改边看


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线可视化编辑-诗梦</title>
  <link rel="shortcut icon" href="https://m.mom1.cn/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://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}
</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="http://www.mom1.cn" style="color: #fff;">MOM1.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"><DOCTYPE HTML>
<html>
    <head>
        <title>诗梦-个人博客引导单页</title>
      <link rel="shortcuticon" href="https://m.mom1.cn/favicon.ico" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!--[if lte IE 8]><script src="https://m.mom1.cn/js/html5shiv.js"></script><![endif]-->
      <link rel="stylesheet" href="https://m.mom1.cn/css/main.css" />
        <!--[if lte IE 9]><link rel="stylesheet" rel="external nofollow" target="_blank" href="https://www.mom1.cn/wp-content/themes/begin/go.php?url=aHR0cHM6Ly9tLm1vbTEuY24vY3NzL2llOS5jc3M=" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" rel="external nofollow" target="_blank" href="https://www.mom1.cn/wp-content/themes/begin/go.php?url=aHR0cHM6Ly9tLm1vbTEuY24vY3NzL2llOC5jc3M=" /><![endif]-->
        <noscript><link rel="stylesheet" href="https://m.mom1.cn/css/noscript.css" /></noscript>
    </head>
    <body class="is-loading">
        <!-- Wrapper -->
            <div id="wrapper">
                <!-- Main -->
                    <section id="main">
                        <header>
                            <span class="avatar"><img src="https://q2.qlogo.cn/headimg_dl?dst_uin=23113497&spec=100" alt="" /></span>
                            <h1>诗梦</h1>
                            <p>也许,只有真正动心了。才会为他所做的一件小事 在旁人看来无所谓,而在她看来却是心碎。</p>
                        </header>
                        <footer>
                            <ul class="icons">
                                <li><a href="https://www.mom1.cn" class="fa-home">首页</a></li>
                                <li><a href="https://wpa.qq.com/msgrd?v=3&uin=23113497&site=qq&menu=yes" class="fa-qq">QQ</a></li>
                                <li><a href="https://weibo.com/" class="fa-weibo">微博</a></li>
                            </ul>
                        </footer>
                    </section>
                <!-- Footer -->
                    <footer id="footer">
                        <ul class="copyright">
                            <li>&copy; <a href="https://www.mom1.cn">诗梦博客</a>.版权所有</li>
                        </ul>
                    </footer>
            </div>
        <!-- Scripts -->
            <!--[if lte IE 8]><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->
            <script>
                if ('addEventListener' in window) {
                    window.addEventListener('load', function() { documentdocument.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
                    document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
                }
            </script>
      <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>
var _hmt_hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2b6c2a9b09256a9e163b63e37857bb6f";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
    </body>
</html></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="//www.mom1.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>

 


凡酷网 (fankuw.cn) - 综合性资源分享平台网站 » 在线可视化编辑源码

发表评论

18
+1858天安全运行
0
+0篇本周更新

Title - Artist
0:00