idedemo.html 5.85 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IDE</title>
    <link rel="stylesheet" href="../css/responsive/css/bootstrap.min.css">
    <link href="../css/codemirror.css" rel="stylesheet">
    <link href="../css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="../js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">

    <link href="../common/fonts/iconfont.css" rel="stylesheet">

    <link href="../css/cm-theme/gbtags.css" rel="stylesheet">
    <link href="../css/cm-theme/eclipse.css" rel="stylesheet">
    <link href="../css/cm-theme/gbtags-dark.css" rel="stylesheet">

    <!-- <link href="../css/layout.css" rel="stylesheet"> -->
    <!-- <link href="../css/main.css" rel="stylesheet"> -->

    <!-- <link href="../css/recording.css" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="../css/demo.css"> -->

    <link rel="stylesheet" href="../css/ide.css">
    
    <script src="../js/jquery-1.7.1.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/codemirror.js"></script>
    <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
    <script src="../js/emmet.js"></script>
    <script src="../js/util/util.js"></script>

    <script src="Dir.js"></script>
    <script src="CodingEditer.js"></script>
    <script src="ToolBox.js"></script>
    <script src="Ide.js"></script>

    <script src="../js/gbdebug/mode/xml/xml.js"></script>
    <script src="../js/gbdebug/mode/javascript/javascript.js"></script>
    <script src="../js/gbdebug/mode/css/css.js"></script>
    <script src="../js/gbdebug/mode/htmlmixed/htmlmixed.js"></script> 
    <script src="../js/gbdebug/mode/clike/clike.js"></script> 
    
    <script>
        var gxb_api = "https://restful1.gaoxiaobang.com";
        // var gxb_api = "http://192.168.80.223:8080"

    </script>
    <script>
        $(function(){
            var languageid = 10;
            var userId = 826920;
            var ide = new GxbIde({
                el: '#folder',
                languageid: 10
            });

            $('.getValue').click(function(){
                // var treeLinkEditor = Dir.treeLinkEditor;
                console.log(CodingEditer.records);
                CodingEditer.getCodeMirrorValue();
                CodingEditer.playCoding();
            })

            $('#compileBtn').click(function(){
                ToolBox.compileMode(userId, languageid);
            })

        })
        
    </script>

    <script>

    </script>

</head>
<body>
    <div>


    </div>
    <div class="programing">

        <!-- 控制条 -->
        <div class="record-title">
            <ul id="recordertab" class="nav nav-tabs pull-left">
                <li class="active">
                    <a href="#recordzone" data-toggle="tab">
                        <i class="icon iconfont icon-suspend"></i>课程录制区
                    </a>
                </li>
                <li>
                    <a href="#replayzone" data-toggle="tab">
                        <i class="icon iconfont icon-yulan"></i>课程预览区
                    </a>
                </li>
            </ul>
        </div>

        <!-- 录制区 -->
        <div class="record-wrap">
            <!-- 录制区 -->
            <div class="gxb-record">
                <div id="ideDir">
                    <div class="tree-header">目录</div>
                    <ul id="folder" class="ztree"></ul>
                    <div id="handleLM"></div>
                </div>

                <div  id="ideEditer" class="tab-content">
                  <div id="recordzone" class="tab-pane active"></div>
                  <div id="replayzone" class="tab-pane"></div>
                </div>
            </div>
        </div>
        
        
    
        <!-- 控录制录制 -->
        <div class="record-toolbox">
            <!-- 运行结果区 -->
            <div class="console-wrap">
                <div id="toolbar">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs result-tabs need-compile" role="tablist" id="cmprun-tabs">
                        <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
                        <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
                        <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
                        <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
                    </ul>
                    <div class="pull-right">
                        <a class="btn btn-success" id="compileBtn">编译运行</a>
                        <a class="btn btn-success"><i class="icon iconfont icon-quanping1"></i></a>
                    </div>
                </div>

                <!-- Tab panes -->
                <div id="resultoutput" class="tab-content need-compile">
                    <div class="tab-pane active padall15" id="stdin">
                        <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">
                    </div>
                    <div class="tab-pane padall15" id="cmpinfo"></div>
                    <div class="tab-pane padall15" id="stderr"></div>
                    <div class="tab-pane padall15" id="output"></div>
                </div>
                <div class="panel-body no-compile" id="ifrcontainer">
                    <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
                </div>
            </div>

            <div class="record-contrl">
               <button class="btn btn-success getValue">
                   播放代码
               </button> 
            </div>

        </div>
        
    </div>
    
</body>
</html>