代码编辑插件使用
你是否需要高逼格的代码编辑功能
前言
最近项目需要在系统中增加代码编辑，为客户提供二次开发功能，让系统更容易扩展。为了实现这个功能，可没少折腾，在百度上一通翻箱倒柜，发现用的比较多的是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="width: 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
