1、Ace Editor介紹
Ace是一個用JavaScript編寫的可嵌入代碼編輯器。它與Sublime，Vim和TextMate等本機編輯器的功能和性能相匹配。它可以輕松地嵌入任何網頁和JavaScript應用程序中。
官網地址
Github項目
2、配置參考博客
Ace editor中文文檔：https://segmentfault.com/a/1190000021386202
3、Demo
<!DOCTYPE html>
<html>
<head>
<title>Demo of ACE Editor</title>
<!--導入js庫-->
<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>
</head>
<body>
<!--代碼輸入框（注意請務必設置高度，否則無法顯示）-->
<pre id="code" class="ace_editor" style="min-height:400px"><textarea class="ace_text-input">
#include <cstdio>
int main(){
int n,m;
scanf("%d %d",&n,&m);
printf("%d",n+m);
return 0;
}
</textarea></pre>
<script>
//初始化對象
editor = ace.edit("code");
//設置風格和語言（更多風格和語言，請到github上相應目錄查看）
theme = "clouds"
language = "java"
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//字體大小
editor.setFontSize(18);
//設置只讀（true時只讀，用於展示代碼）
editor.setReadOnly(false);
//自動換行,設置為off關閉
editor.setOption("wrap", "free")
//啟用提示菜單
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
</body>
</html>
4、運行結果 （還有代碼提示功能哦。截圖沒截上去）
