前言
網頁上想在線編輯代碼，可以使用Ace Editor 在線編輯實現。比如我們想實現一個功能，在網頁版上寫python代碼，能有python的語法自動補齊功能。
Ace Editor 在線編輯
ACE是一個開源的、獨立的、基於瀏覽器的代碼編輯器，可以嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過40種語言語法高亮，縮進，代碼提示功能且具有大量的主題；並能夠處理代碼多達404萬行的大型文檔。ACE開發團隊稱，ACE在性能和功能上可以媲美本地代碼編輯器（如SublimeText、TextMate和Vim等）。
Github地址：https://github.com/ajaxorg/ace
ace官網地址：https://ace.c9.io/
支持語言：python、java、javascript、json、jsp、markdown、mysql、nginx...等
導入js文件
需導入的js文件主要有2個:ace.js 和 ext-language_tools.js
方式1：用在線cdn
bootstrap 中文網提供的 cdn 服務；http://www.bootcdn.cn/
<script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
<script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
或這個地址
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"</script>
方式2：下載到本地
從github下載資源到本地https://github.com/ajaxorg/ace.git
<script src="/static/ace/src/ace.js"></script>
<script src="/static/ace/src/ext-language_tools.js"></script>
簡單使用
需注意的是<div id="editor"></div>容器需設置寬度和高度
<style>
/*必須給editor包裹元素設置寬高*/
#editor{
width:100%;
height:800px;
}
</style>
完整html示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/ace/src/ace.js"></script>
<script src="/static/ace/src/ext-language_tools.js"></script>
<style>
/*必須給editor包裹元素設置寬高*/
#editor{
width:100%;
height:800px;
}
</style>
</head>
<body>
<div id="editor"></div>
</body>
<script>
//初始化id字符串（不加#）
var editor = ace.edit('editor');
</script>
</html>
這樣就可以得到一個最簡單的在線編輯器了
添加主題和語言
設置字體大小，背景主題和語言設置為python
<script>
//初始化id字符串（不加#）
var editor = ace.edit('editor');
//設置主題
editor.setTheme("ace/theme/monokai");
// 設置編輯語言
editor.getSession().setMode("ace/mode/python")
// 設置字體大小
editor.setFontSize(28)
</script>
於是就可以得到這樣效果
設置語法補齊
下一步需設置python代碼語法自動補齊功能,設置setOptions屬性。
<script>
//初始化id字符串（不加#）
var editor = ace.edit('editor');
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
//設置主題
editor.setTheme("ace/theme/monokai");
// 設置編輯語言
editor.getSession().setMode("ace/mode/python")
// 設置字體大小
editor.setFontSize(28)
</script>
其它功能
其它功能參考
<script>
//初始化id字符串（不加#）
var editor = ace.edit('editor');
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
//設置主題
editor.setTheme("ace/theme/monokai");
// 設置編輯語言
editor.getSession().setMode("ace/mode/python");
// 設置字體大小
editor.setFontSize(28);
// 設置行高;
document.getElementById("editor").style.lineHeight="40px";
// 移動光標至第0行，第0列
editor.moveCursorTo(0, 0);
//設置只讀（true時只讀，用於展示代碼）
editor.setReadOnly(false);
//自動換行,設置為off關閉
editor.setOption("wrap", "free");
//5.設置編輯內容
var editorValue='def function():\n' +
' return "hello"';
editor.setValue(editorValue);
//撤銷：
// editor.undo();
//查找替換：
editor.execCommand('replace');
//編輯內容搜索
//editor.execCommand('find');//與ctrl+f功能一致
//自動換行 關閉時free換成off
editor.setOption("wrap", "free");
//獲取編輯內容
//editor.getValue();
</script>