利用ace.js编写一个JavaScript编辑器(带智能补全)

心已赠人 2022-06-06 02:21 480阅读 0赞

<html lang="en">
        <head>
            <title>javascript编辑器</title>
            <style type="text/css" media="screen">
                #aaa { 
                    width:50%;
                }
                #editor { 
                    width:100%;
                    padding-bottom: 35%;
                }
                #iframe1{
                    width:100%;
                    background: #505050;
                    border:1px;
                }
                #rundata{
                    width:100%;
                    border:1px;
                }
            </style>
        </head>
        <body>
            <div id="aaa">
                <div id="editor"></div>
                <div ><button id="rundata" οnclick="rundata()">RUN</button></div>
                <div ><iframe id="iframe1"></iframe></div> 
                
            </div>
            
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
            <script>
                ace.require("ace/ext/language_tools");
                var editor = ace.edit("editor");
                editor.setOptions({
            //      enableBasicAutocompletion: true,
            //      enableSnippets: true,
                    enableLiveAutocompletion: true,//只能补全
                });
                editor.setTheme("ace/theme/monokai");//monokai模式是自动显示补全提示
                editor.getSession().setMode("ace/mode/javascript");//语言
                editor.setFontSize(16);
            </script>
            <script>
                function rundata(){  
                    //获取输入框内的数据  
                    var text = document.getElementById('editor').innerText;  
                    // 先清空iframe
                    if(document.getElementById("iframe1").contentWindow.document.body!=null){
                        var iframe = document.getElementById("iframe1").contentWindow.document.body.innerText = "";
                    }
                    //添加script标签，去掉开头的行号
                    var ctext = "<script>"+text.replace(/\d\n/g, "")+'<\/script>';
                    console.log(ctext);
                    //替换控制台打印(伪装效果)
                    if(ctext.indexOf("console.log")>0){
                        ctext = ctext.replace("console.log", "document.write");
                    }
                    console.log(ctext);
                    //将输入框内的数据传给iframe  
                    iframe = document.getElementById('iframe1').contentDocument.write(ctext);
               }            
            </script>
        </body>
    </html>

效果：

![Center][]

ace地址：[https://github.com/ajaxorg/ace-builds/][https_github.com_ajaxorg_ace-builds]

[Center]: /images/20220606/474741fe20ce4e708fe2876f25711e70.png
[https_github.com_ajaxorg_ace-builds]: https://github.com/ajaxorg/ace-builds/