master

分支 (2)

管理

管理

master

dev

kidcoder-editor-custom
/
code.html

<html>

<head>
    <meta charset="utf-8" />
    <script src="skulpt.min.js" type="text/javascript"></script>
    <script src="skulpt-stdlib.js" type="text/javascript"></script>
    <link href="./lib/codemirror.css" rel="stylesheet" type="text/css" />
    <link href="./theme/monokai.css" rel="stylesheet" type="text/css" />
    <link href="./addon/display/fullscreen.css" rel="stylesheet" type="text/css" />
    <script src="./lib/codemirror.min.js"></script>
    <script src="./mode/python/python.js"></script>
    <!-- <link href="css/index.css" rel="stylesheet" type="text/css" /> -->
    <link rel="stylesheet" type="text/css" href="./lib/iview.css" />
    <script type="text/javascript" src="./lib/vue.js"></script>
    <script type="text/javascript" src="./lib/iview.min.js"></script>
    <script src="./addon/comment/comment.js"></script>
    <script src="./addon/selection/active-line.js"></script>
    <script src="./addon/hint/show-hint.js"></script>
    <script src="./mode/python/python.js"></script>
    <script src="./addon/fold/foldcode.js"></script>
    <script src="./addon/fold/foldgutter.js"></script>
    <script src="./addon/fold/brace-fold.js"></script>
    <script src="./addon/fold/indent-fold.js"></script>
    <script src="./addon/fold/comment-fold.js"></script>
    <script src="./addon/edit/closebrackets.js"></script>
    <script src="./addon/edit/matchbrackets.js"></script>
    <link rel="stylesheet" href="./addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="./addon/hint/show-hint.css" />
    <link rel="stylesheet" href="./addon/lint/lint.css" />
    <title>Python-Online</title>
</head>

<body>
    <div id="app">
        <div id="" class="page">
                <div class="outputd">
                    <div class="control"><button style="width: 100px;height: 100%;margin-left: 10px;border: none;background-color: #f7f7f7;display: flex;align-items: center;gap: 10px;cursor: pointer;" onclick="getPythonUrl()"><img src="./image/run.png" alt="" style="width: 30px;height: 30px;">运行</button></div>
                    <Collapse v-model="value1">
                        <Panel name="1">
                                <span>图形输出</span>
                                <div id="mycanvas" class="canvas-ouput" slot="content"></div>
                        </Panel>
                        <Panel name="2">
                                <span>文字输出</span>
                                <pre id="output" slot="content" class="output"></pre>
                        </Panel>
                    </Collapse>
                </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                value1:['1','2']
            },
            methods: {

            },
        });
        const showw = () =>{
            console.log(myTextarea.innerText)
        }
        function outf(text) {
            var mypre = document.getElementById("output");
            mypre.innerHTML = mypre.innerHTML + text;
        }
        function builtinRead(x) {
            if (
                Sk.builtinFiles === undefined ||
                Sk.builtinFiles["files"][x] === undefined
            )
                throw "File not found: '" + x + "'";
            return Sk.builtinFiles["files"][x];
        }
        function getPythonUrl(){
            // 获取当前页面完整的URL
            const url = window.location.href;
            // 创建URLSearchParams对象来解析查询参数
            console.log(url,'url')
            const params = new URLSearchParams(url.split('?')[1]);
            // 获取名为source的参数值
            const source = params.get('source');
            console.log(source)
            getPythonCode(source)
        }
        function getPythonCode(source){
            fetch(source)
                .then(response => response.blob())
                .then(blob => {
                    const reader = new FileReader();
            reader.onload = function () {
                const str = this.result;
                runit(str);
            };
        reader.readAsText(blob);
                    })
                .catch(error => {
                    console.error("Error fetching the file:", error);
                    });
        }
        function runit(str) {
            var prog = str;
            var mypre = document.getElementById("output");
            mypre.innerHTML = "";
            Sk.pre = "output";
            Sk.configure({
                output: outf,
                read: builtinRead,
                __future__: Sk.python3,
            });
            (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = "mycanvas";
            var myPromise = Sk.misceval.asyncToPromise(function() {
                return Sk.importMainWithBody("<stdin>", false, prog, true);
            });
            myPromise.then(
                function(mod) {
                    console.log("success");
                },
                function(err) {
                    console.log(err.toString());
                    mypre.innerHTML = err.toString();
                }
            );
        }
    </script>

</html>
<style>

    .workbench {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .canvas-ouput {
        height: 50vh
    }

    .output {
        height: 50vh
    }

    .outputd {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #app {
        background-color: #e6f0ff;

        height: 100%;
        width: 100%;
    }
    .index-form:hover {
            cursor: col-resize;
        }
    .output-title{
        background-color: #ecf1f7;
    }
    .control{
    width: 100%;
    min-height: 50px;
    background-color: #f7f7f7;
    border: 1px solid rgb(212, 211, 211);
    border-bottom: none;

}
</style>