master

分支 (2)

管理

管理

master

dev

kidcoder-editor-custom
/
index.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">
            <Split v-model="split">
                <template #left>
                    <div>
                        <textarea id="yourcode" class="index-form" style="font-family: Consolas, 'Courier New', monospace;"></textarea>
                    </div>
                </template>
                <template #right>
                    <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="runit()"><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" style="margin: 0;"></pre>
                            </Panel>
                        </Collapse>

                    </div>
                </template>
            </Split>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                split:0.5,
                value1: ['1', '2']
            },
            methods: {
                clear: function (event) {
                    CodeMirrorEditor.setValue("")
                    var mypre = document.getElementById("output")
                    mypre.innerHTML = "";
                }
            }
        });
        const init = () => {
            // 获取当前页面完整的URL
            const url = window.location.href;
            // 创建URLSearchParams对象来解析查询参数
            const params = new URLSearchParams(url.split('?')[1]);
            // 获取名为source的参数值
            const source = params.get('source');
            console.log('source', source)
            if (source!= '' && source!= null) {
                getPythonCode(source);
            }
        }
        function getPythonCode(source) {
            fetch(source)
            .then(response => response.blob())
            .then(blob => {
                    const reader = new FileReader();
                    reader.onload = () => {
                        const str = reader.result;
                        CodeMirrorEditor.setValue(str)
                    }
                    reader.readAsText(blob);
                })
            .catch(error => {
                    console.error("Error fetching the file:", error);
                })
        }
        window.onmessage = (e) => {
            uploadPython(e)
        };
        var myTextarea = document.getElementById("yourcode");

        var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
            mode: "python",
            lineNumbers: true,
            lineWrapping: true,
            foldGutter: true,
            matchBrackets: true,
            autoCloseBrackets: true,
            styleActiveLine: true,
            completeSingle: false,
            indentUnit: 4,
        });

        window.onload = () =>{
            CodeMirrorEditor.on("keypress", function () {
            // 显示智能提示
            CodeMirrorEditor.showHint(); // 注意，注释了CodeMirror库中show-hint.js第131行的代码（阻止了代码补全，同时提供智能提示）
        });
        CodeMirrorEditor.setSize("100%", "100%");
        }
        const form = document.querySelector('.index-form');
        let startX;
        let initialWidth;
        function updateOutputHeights(parentHeight) {
            const canvasOutput = document.querySelector('.canvas-ouput');
            const textOutput = document.getElementById('output');
            const halfHeight = parentHeight / 2;
            canvasOutput.style.height = halfHeight + 'px';
            textOutput.style.height = halfHeight + 'px';
        }

        const showw = () => {
            console.log(myTextarea.innerText)
        }
        function uploadPython(e) {
            var myTextarea = document.getElementById("yourcode");
            var blob = new Blob([CodeMirrorEditor.getValue()], {type: 'text/plain'});
            var formData = new FormData();
            formData.append('value', blob);
            formData.append('type', 'WORKS');
            window.top.postMessage({'value': blob, 'type': 'python'}, e.origin)
        }
        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 runit() {
            var prog = CodeMirrorEditor.getValue();
            var mypre = document.getElementById("output");
            var canvasOutput = document.querySelector('.canvas-ouput');
            console.log()
            mypre.innerHTML = "";
            Sk.pre = "output";
            Sk.configure({
                output: outf,
                read: builtinRead,
                __future__: Sk.python3,
            });
            (Sk.TurtleGraphics || (Sk.TurtleGraphics = {width:parseInt(window.getComputedStyle(canvasOutput).width.replace('px','')),height:parseInt(window.getComputedStyle(canvasOutput).height.replace('px',''))})).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();
                }
            );
        }
        init()
    </script>

</html>
<style>
.CodeMirror {
        font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace!important;
        font-weight: normal;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: 0px;
        border-radius: 10px 0px 0px 10px;
    }

.index-form {
        border: 1px solid rgb(197, 197, 197);
        border-right: none;
        width: 100%;
        height: 100%;
        border-radius: 10px 0px 0px 10px;
    }

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

.canvas-ouput {
    height: 50vh;
    }

.output {
    height: 50vh;
    overflow-y: auto;

    }

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


    }

.page {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 10px;
    }

.app {
        background-color: #e6f0ff;
        height: 100%;
        width: 100%;
    }

.output-title {
        background-color: #ecf1f7;
    }
.ivu-collapse-content{
}
.ivu-collapse-item{
}
.control{
    width: 100%;
    min-height: 42px;
    background-color: #f7f7f7;
}
.ivu-collapse-content>.ivu-collapse-content-box {
    padding-top: 0px;
}
</style>