doc.html 7.33 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ecode 在线文档</title>
    <link rel="stylesheet" href="/ecode/editormd/css/editormd.preview.css">
    <link rel="stylesheet" href="/ecode/editormd/css/editormd.min.css" />
    <link rel="stylesheet" href="/ecode/lib/viewer.min.css" />
</head>
<body>
<div id="layout">
    <div id="sidebar">
        <div class="markdown-body editormd-preview-container" id="custom-toc-container" previewcontainer="false"></div>
    </div>
    <div id="md-editor">
        <textarea style="display:none"></textarea>
    </div>
</div>

<script type="application/javascript" src="/ecode/lib/jquery.min.js"></script>
<script src="/ecode/editormd/lib/marked.min.js"></script>
<script src="/ecode/editormd/lib/prettify.min.js"></script>
<script src="/ecode/editormd/lib/raphael.min.js"></script>
<script src="/ecode/editormd/lib/underscore.min.js"></script>
<script src="/ecode/editormd/lib/sequence-diagram.min.js"></script>
<script src="/ecode/editormd/lib/flowchart.min.js"></script>
<script src="/ecode/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/ecode/lib/viewer.min.js"></script>
<script type="application/javascript" src="/ecode/editormd/editormd.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
        margin: 0;
        padding: 0;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
        display: block;
    }

    audio, canvas, video {
        display: inline-block;
    }

    img {
        border: none;
        vertical-align: middle;
    }

    ul, ol {
        /*list-style: none;*/
    }

    .clear {
        *zoom: 1;           /* for IE 6/7 */
    }

    .clear:before, .clear:after {
        height: 0;
        content: "";
        font-size: 0;
        display: table;
        line-height: 0;     /* for Opera */
        visibility: hidden;
    }

    .clear:after {
        clear: both;
    }

    body {
        font-size: 14px;
        color: #666;
        font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
        background: #fff;
        text-align: center;
    }

    #layout {
        text-align: left;
    }

    #layout > header, .btns {
        padding: 15px 0;
        width: 90%;
        margin: 0 auto;
    }

    .btns {
        padding-top: 0;
    }

    .btns button {
        padding: 2px 8px;
    }

    #layout > header > h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .btns button, .btn {
        padding: 8px 10px;
        background: #fff;
        border: 1px solid #ddd;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        cursor: pointer;
        -webkit-transition: background 300ms ease-out;
        transition: background 300ms ease-out;
    }

    .btns button:hover, .btn:hover {
        background: #f6f6f6;
    }

    body {
        padding-left: 40px;
        padding-right: 40px;
    }

    #layout > header, .btns {
        width: auto;
    }

    #sidebar {
        width: 400px;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow: auto;
        background: #fff;
        z-index: 100;
        padding: 18px;
        border: 1px solid #ddd;
        border-top: none;
        border-bottom: none;
    }

    #sidebar:hover {
        overflow: auto;
    }

    #sidebar h1 {
        font-size: 16px;
    }

    #custom-toc-container {
        padding-left: 0;
    }

    #md-editor {
        padding-left: 430px;
        padding-right: 0;
        margin: 0;
    }
</style>
<script>
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var appId = getQueryString('appId');
    if(!appId||appId&&appId=='') appId = 'b59e05ced89f43d69ed7d6bdb6c57140';
    var docId = getQueryString('docId');//'b59e05ced89f43d69ed7d6bdb6c57140';
    var maxImgWidth = getQueryString('maxImgWidth');
    function callMdId(cb) {
      jQuery.ajax({
        url:'/api/ecode/resource/mdList?folderId='+appId,
        dataType:'json',
        success:function(r) {
          // console.log(r);
          if(!r) return ;
          if(!r.status) return ;
          if(!r.mdList) return ;
          var id = '';
          for(var i=0;i<r.mdList.length;i++) {
            var obj = r.mdList[i];
            if(obj.name==='index.md') {
              id = obj.id;
            }
          }
          if(id!=='') {
            cb(id);
          }
        }
      });
    }
    function callMdStr(cb) {
      callMdId(function (id) {
        jQuery.ajax({
          url:'/api/ecode/resource/markdown?id='+id,
          dataType:'json',
          success:function(r) {
            cb(r.content||'');
          }
        });
      });
    }
    function callMdStrNoList(cb,id) {
      jQuery.ajax({
        url:'/api/ecode/resource/markdown?id='+id,
        dataType:'json',
        success:function(r) {
          cb(r.content||'');
        }
      });
    }
    $(function() {
        if(docId&&docId!='') {
          callMdStrNoList(function (content) {
            showMd(content);
          },docId);
        }
        else {
          callMdStr(function (content) {
            //console.log(content);
            showMd(content);
          });
        }
    });
    function showMd(markdown) {

      var _editormd = editormd.markdownToHTML("md-editor", {
        appId:appId,
        path   : "/ecode/editormd/lib/",
        markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
        htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
        // htmlDecode      : "style,script,iframe",  // you can filter tags decode
        toc             : true,
        tocm            : true,    // Using [TOCM]
        tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
        //gfm             : false,
        //tocDropdown     : true,
        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
        maxImgWidth: maxImgWidth
      });

      if(location.href.indexOf('#')>=0) location.href = location.href;
      var viewer = new Viewer(document.getElementById('md-editor'), {
        inline: false,
        viewed() {

        },
        url(img) {
          return img.src;
          // if(img.src.indexOf('cloudstore/release')>=0&&img.src.indexOf('-big.png')<0) {
          //   return img.src.replace('.png','-big.png');
          // }
          // else {
          //   return img.src;
          // }
        }
      });
    }
</script>
</body>
</html>