原文地址： https://blog.csdn.net/cgema/article/details/72458008
最近在做一個node.js的項目，有一處textarea需要編輯js腳本，普通的textarea使用起來比較雞肋，於是決定找一個好用的腳本編輯器接入使用，簡單跟大家分享一下接入方法。
一、資源獲取
廢話不多說，先上ACE官網：https://ace.c9.io/#nav=about
資源地址：https://github.com/ajaxorg/ace-builds/
下載好資源后，看readme，它有4種版本：
- src concatenated but not minified
- src-min concatenated and minified with uglify.js
- src-noconflict uses ace.require instead of require
- src-min-noconflict concatenated, minified with uglify.js, and uses ace.require instead of require
正常情況我們使用src-noconflict版本就夠用了，今天也是基於這個版本來接入的。
二、簡單版ACE編輯器接入
先看個官網給出的例子：
<!DOCTYPE html> <html lang="en"> <head> <title>ACE in Action</title> <style type="text/css" media="screen"> #editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> </head> <body> <div id="editor"> function foo(items) { var x = "All this is syntax highlighted"; return x; } </div> <script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/javascript"); </script> </body> </html>可以看得出真的超級簡單有木有，在你的html里面，你只需要預先設置一個div，注意這個div一定要設置style，不然ace editor可能會展示不出來，然后引入你下載好的ace的源src，然后初始化一下，設置一下編輯器的主題和模式就可以了。這時候你刷新頁面會看到你的頁面多了一個ace的腳本編輯器，就像下面這樣：
這個簡單版的ace editor具有簡單的檢測代碼是否錯誤的能力，但是還沒有提示功能。
同時有很多API可以進行設置，以達到你想要的效果，API就不在此羅列了，大家可以去官網仔細看看。
但是如果你想要一個可以隨時切換腳本語言及主題的編輯框呢？或者你想要有代碼提示功能呢？
接下來的升級版就能滿足你的要求啦！
三、升級版ACE編輯器接入
升級版編輯器可以根據你輸入的內容進行代碼提示，還可以讓你隨時切換腳本語言及編輯框主題，想想都很贊，快來看看怎么接入吧！
官網給出了這么一個bookmarklet的例子：https://ace.c9.io/build/demo/bookmarklet/index.html
你下載的資源的demo里面也有，參考一下，主要加入以下方法即可完成接入：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link href="style.css" rel="stylesheet" type="text/css"> <title>Ace Bookmarklet Builder</title> </head> <body> <div id="wrapper"> <div class="content" style="width: 950px"> <div class="column1" style="margin-top: 47px"> <textarea id="textarea" style="width:800px; height:500px"> /** * This is Ace injected using a bookmarklet. */ function foo() { var bar = true; } </textarea> </div> </div> <script> function inject(options, callback) { var baseUrl = options.baseUrl || "../../src-noconflict"; var load = function(path, callback) { var head = document.getElementsByTagName('head')[0]; var s = document.createElement('script'); s.src = baseUrl + "/" + path; head.appendChild(s); s.onload = s.onreadystatechange = function(_, isAbort) { if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") { s = s.onload = s.onreadystatechange = null; if (!isAbort) callback(); } }; }; load("ace.js", function() { ace.config.loadModule("ace/ext/textarea", function() { var event = ace.require("ace/lib/event"); var areas = document.getElementsByTagName("textarea"); for (var i = 0; i < areas.length; i++) { event.addListener(areas[i], "click", function(e) { if (e.detail == 3) { ace.transformTextarea(e.target, options.ace); } }); } callback && callback(); }); }); } // Call the inject function to load the ace files. var textAce; inject({}, function () { // Transform the textarea on the page into an ace editor. var t = document.querySelector("textarea"); textAce = ace.require("ace/ext/textarea").transformTextarea(t); setTimeout(function(){textAce.setDisplaySettings(false)}); }); </script> </body> </html>升級版的接入也不難，在你的html里面，你只需要預先設置一個textarea，注意這個textarea一定要設置style，不然ace editor可能會展示不出來，然后參考例子將初始化和load代碼放進去就可以了，你甚至除了文件資源路徑以外，不需要修改任何代碼就可以搞定，這時候你刷新頁面會看到你的頁面的編輯框右下角多了一個ace的bookmarklet的腳標，點擊可以浮出設置框，就像下面這樣：
四、ACE編輯器增加代碼提示功能
加上升級版后，發現代碼依然不能在我們輸入的時候做提示，我研究了一下發現，官網提供的資源是沒有提示功能的，有其他資源做了相關拓展后就可以了，於是找到了一個很棒的CDN資源：
http://www.bootcdn.cn/ace/
將這里的ace.js和下載的資源里面的ace.js替換后即可，或者不想把ACE資源加在項目里面的話，可以直接引入CDN資源也是可以的：
//引入本地資源
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <script src="src-noconflict/ext_language_tools.js" type="text/javascript" charset="utf-8"></script> //或者下面這樣直接引入CDN資源 <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">
提示的效果如下：
五、ACE編輯器出錯信息獲取
知道ACE Editor可以自動檢錯，但是我們怎么獲取到這個錯誤呢？
在stackoverflow上找到了這樣的解決方案：
http://stackoverflow.com/questions/9506154/determine-if-javascript-syntax-is-valid-in-change-handler-of-ace
自己試了一下：
<script> function functionname(){ var annot = textAce.getSession().getAnnotations(); for (var key in annot){ console.log(annot[key].row); console.log(annot[key].column); console.log(annot[key].text); console.log(annot[key].type); } if (annot.length != 0) { alert(annot); } } </script>
錯誤信息大致如下：
getAnnotations可以拿到當前ACE檢查到的所有錯誤，它是一個數組，每一個元素是一個對象，里面包含錯誤所在的行row，錯誤所在第幾個字符處column，錯誤信息內容text，以及錯誤類型type，依次打印出這些內容后，你就知道檢查的錯誤項到底是什么了，是不是很簡單方便，喜歡的拿走不謝，希望能幫助到大家！
參考文檔：
【1】https://ace.c9.io/#nav=about
【2】http://www.bootcdn.cn/ace/
【3】http://stackoverflow.com/questions/9506154/determine-if-javascript-syntax-is-valid-in-change-handler-of-ace
【4】http://www.uedsc.com/ace-js.html
【5】https://yq.aliyun.com/articles/65260