代码编辑插件使用

你是否需要高逼格的代码编辑功能

前言

最近项目需要在系统中增加代码编辑，为客户提供二次开发功能，让系统更容易扩展。为了实现这个功能，可没少折腾，在百度上一通翻箱倒柜，发现用的比较多的是codemirror，像开发人员踏足的w3school就是用的codemirror。

但是codemirror只是基本的代码编辑和着色功能，没有我想要的自带自动完成功能，即编辑时自动触发自动完成（我测试时，是需要按快捷键才能出现自动完成，为了自动完成，还必须每次输入后还有按快捷键，所以放弃了)。又是一番找寻。众里寻她千百度，蓦然回首，那她却在微软处。原来微软开源了一款代码编辑神器monaco-editor，Visual Studio Code强大的代码编辑功能就是使用的她，她的家https://github.com/microsoft/monaco-editor，看她第一眼就深深的吸引了我，对就她了，非她不"娶"了。

插件选择

功能	codemirror	monaco-editor
官网	https://codemirror.net	https://github.com/microsoft/monaco-editor
代码编辑和着色	支持	支持
代码自动完成	自动完成关键字需要先行维护	自带
支持语言	html,javascript,css等常用语言都支持	codemirror支持的都支持，还支持一些codemirror不支持的她也支持，比如本人需要的csharp
大小	小，几百kb,可按需引用语言包	原始大小80m,忍受不了这么大，一番精简到22m

monaco-editor支持的语言见下图。

monaco-editor引用即用的代码自动完成功能。

如何使用

经过一番权衡后，还是选择了monaco-editor，现在我们开始把她"娶"回家。要娶媳妇回家，怎能没有房子呢，打开vs，选择ASP.NET core web 应用,我们来为她建一栋。新家建好后，我来把她迎进来，看看新家怎么样。

把媳妇安排到_CodeLayout.cshtml房间住下。为了媳妇能找得到房间，需指定一个路径。

//具体路径路径根据类库放置位置进行调整
<script src="~/lib/monaco-editor/min/vs/loader.js"></script>

媳妇一身好才艺，可别浪费了，发挥发挥她的特长。帮我们做个趁手的在线代码编辑器吧。

首先建一个首页Index.cshtml，前端建立一个按钮，一个代码编辑框和一个运行结果展示。前端代码如下

<div class="text-center">
    <button id='bt_run' onclick="addIframe()">运行（R)</button>
    <fieldset class="ui-grid-a">
        <!--编辑框-->
        <div class="ui-block-a">
            <div id="editcode" style=" 800px; height: 800px; border: 1px solid grey"></div>
        </div>
        <div class="ui-block-b">
            <div id="iframe">
                 <!--显示控件-->
                <div id="iframewrapper">
                </div>
            </div>
        </div>
    </fieldset>
</div>

JS初始化配置

  window.onload=function () 
    {
        //**代码编辑器初始化 ，初始化很简单，就下面几行代码就实现了代码编辑*/
        code= window.localStorage["editcode"]
        if(code==null) code= '<HTML>this is test </HTML>';
        //指定配置路径，路径必须指定正确，不然无法正常显示
        require.config({ paths: { vs: '../lib/monaco-editor/min/vs' } });
        require(['vs/editor/editor.main'], function () {
            //**创建编辑器对象 */
            editor = monaco.editor.create(document.getElementById('editcode'), {
                //value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
                value: code,                          //初始化代码
                // language: 'javascript',
                language: 'html',                    //指定代码编辑语言
                theme: 'vs-dark'                     //指定编辑框主题
            });
        });
    }

以下说完整的javascript代码，使用monaco-editor就下面几行代码就实现在线代码编辑功能。

<script>

    let code;
    var editor;
    let framename = "iframe_test";
    window.onload=function () 
    {
        code= window.localStorage["editcode"]
        if(code==null) code= '<HTML>this is test </HTML>';
        require.config({ paths: { vs: '../lib/monaco-editor/min/vs' } });
        require(['vs/editor/editor.main'], function () {
            editor = monaco.editor.create(document.getElementById('editcode'), {
                //value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
                value: code,
                // language: 'javascript',
                language: 'html',
                theme: 'vs-dark'
            });
        });
    }

        var i = 0;    
        var editorArray = [];
        function addIframe() {
             //let editor = editorlist["editcode"];
           
            if (editor == null) { console.error("编辑器没有初始化！"); return; }
            let curr_frame = document.getElementById(framename);
            var If = curr_frame != null ? curr_frame : document.createElement("iframe");
            //var If = document.createElement("iframe");
            If.style.height = "800px";
            If.style.width = "100%";
            If.id = framename;
            If.name = framename;
            if (curr_frame == null) document.all("iframewrapper").appendChild(If);
            var doc1 = window.frames[framename].document;
            doc1.close();
            let editorArray = [];
            editorArray.push(editor);
            let code= editorArray[0].getValue();
            doc1.write(code);
            window.localStorage["editcode"] = code;

        }
</script>

一个简单的在线代码编辑器就做好了，点击运行按钮，运行代码编辑器内容，看看效果吧！

完整的演示代码，移步https://github.com/sunaccess/ifand

做了就有可能！