你是否需要高逼格的代碼編輯功能
前言
最近項目需要在系統中增加代碼編輯，為客戶提供二次開發功能，讓系統更容易擴展。為了實現這個功能，可沒少折騰，在百度上一通翻箱倒櫃，發現用的比較多的是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