Online Editor Tool - 前端笔记 JSRUN

BootCDN: https://www.bootcdn.cn/codemirror/
CodeMirror： https://codemirror.net/mode/index.html
HTML 源代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Editor Tools</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/codemirror.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/codemirror.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/edit/closebrackets.min.js"></script>

    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/theme/darcula.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/theme/eclipse.min.css" rel="stylesheet">

    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/hint/show-hint.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/hint/show-hint.min.js"></script>

    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/fold/foldgutter.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/fold/foldgutter.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/fold/indent-fold.min.js"></script>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/fold/markdown-fold.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/fold/comment-fold.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/fold/foldcode.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/hint/javascript-hint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/lint/javascript-lint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/hint/html-hint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/mode/css/css.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/hint/css-hint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/mode/xml/xml.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/addon/hint/xml-hint.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/mode/clike/clike.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.1/mode/php/php.min.js"></script>
    <style>
        html, body {
            width: 100vw;
            height: 100vh;
        }

        body {
            margin: 0;
        }

        .linear-layout,
        .linear-layout-horizontal {
            display: flex;
        }

        .linear-layout-horizontal {
            flex-direction: row;
        }

        .linear-layout-col {
            flex: 0;
        }

        .linear-layout-col-fill {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="linear-layout-horizontal">
        <div class="linear-layout-col-fill">
            <form>
                <select id="select1"></select>
            </form>
<textarea id="FunctionEditor">

</textarea>
        </div>
        <div class="linear-layout-col">
            <iframe src="" id="frame1" style="width: 40vw;height:99vh;border: none;"></iframe>
        </div>
    </div>

    <script>
        window.onload = () => {

            let config = { mode: "", text: "" };

            ((index) => {
                const text_js = "function test() {\n\n\t/** test main **/\n\tfunction main() {\n\t\tconsole.log('hello world!');\n\n\t\tvar reg = new Regxt();\n\t}\n}";
                const text_php = "<?php\n\tclass index extends Container {\n\t\tfunction index() {\n\t\t\treturn view();\n\t\t}\n\t}";
                const text_html = "<!doctype html>\n<html>\n\t<head></head>\n\t<body>\n\t\t<h1>Hello World!</h1><br/>\n\t</body>\n</html>";
                const text_css = "*{\n\tfont-size: 34px;\n}\n\nhtml,body {\n\tmargin: 0;\n}";
                const text_java = "public class Main {\n\n\tvoid main(String[] args) {\n\t\tprintln(\"Hello World\");\n\t}\n\n}";

                let res = [
                    { name: 'javascript', mode: 'javascript', text: text_js },
                    { name: 'php', mode: 'application/x-httpd-php', text: text_php },
                    { name: 'html', mode: 'text/html', text: text_html },
                    { name: 'css', mode: 'text/css', text: text_css },
                    { name: 'java', mode: 'text/x-java', text: text_java },
                    { name: 'c#', mode: 'text/x-csharp', text: text_java }
                ];
                if (index >= res.length) throw new Error('res index out.');

                config.mode = res[index].mode;
                config.text = res[index].text;

                let html = '';
                res.forEach(function (a, b) { html += '<option value="' + b + '" ' +(index == b ? 'selected' : '')+'>' + a.name + '</option>'; })
                document.getElementById('select1').innerHTML = html;
            })(2);

            let editor = CodeMirror.fromTextArea(document.getElementById("FunctionEditor"), {
                mode: config.mode, //实现javascript代码高亮
                lineNumbers: true,  //显示行号
                theme: "eclipse",//"darcula", //设置主题
                lineWrapping: true, //代码折叠
                foldGutter: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                matchBrackets: true,  //括号匹配
                autoCloseBrackets: true,
                //showHint: true,
                //autofocus: false,
                extraKeys: { "Shift-Space": "autocomplete" },//shift-space唤起智能提示
                smartIndent: true,
                hintOptions: { completeSingle: false }
            });
            editor.setValue(config.text);

            // 将自动提示绑定到change事件上，这样输入的时候就可以看到联想的关键词
            editor.on('change', (instance, change) => {
                // 自动补全的时候，也会触发change事件，所有坐下判断，以免死循环，正则是为了不让空格，换行之类的也提示
                // 通过change对象你可以自定义一些规则去判断是否提示
                if (change.origin !== 'complete' && /\w|\./g.test(change.text[0])) {
                    instance.showHint()
                }
            });


            var frame = document.getElementById('frame1');
            console.log(frame);
            //frame.src = 'https://www.baidu.com';
            var doc = frame.contentDocument;

            var onerror = (message, source, lineno, colno, error) => {
                console.log('捕获到 iframe 异常：', { message, source, lineno, colno, error });
                //debugger;
                return true;
            };

            //window.onerror = onerror;
            //frame.contentWindow.addEventListener("unhandledrejection", function (e) {
            //    e.preventDefault()
            //    console.log('捕获到异常：', e);
            //    return true;
            //});

            var html = '<html><head></head><body>';

            html += '<h1>hello world</h1>';
            html += '<p><button onclick="test()">测试</button>';
            html += '<script>';

            //html += 'window.onerror = (e) => { alert("异常:"+e); console.error(e); return true; };';

            html += 'alyyert("hello");';

            //html += 'function test() { alyyert("hello"); }';

            html += '<\/script>';

            html += '</body></html>';

            //doc.clear();
            doc.writeln(html);

            frame.contentWindow.onerror = onerror;
            //window.frames[0].onerror = onerror;

            /**利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控*/
            //frame.contentWindow.addEventListener('load', function () {
            //    sessionStorage.setItem('good_exit', 'pending');
            //    setInterval(function () {
            //        sessionStorage.setItem('time_before_crash', new Date().toString());
            //    }, 1000);
            //});

            //frame.contentWindow.addEventListener('beforeunload', function () {
            //    sessionStorage.setItem('good_exit', 'true');
            //});

            //if (sessionStorage.getItem('good_exit') &&
            //    sessionStorage.getItem('good_exit') !== 'true') {
            //    /*
            //        insert crash logging code here
            //    */
            //    alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));
            //}
        }
    </script>
</body>
</html>