【前端】ACE Editor（代碼編輯器）簡易使用示例

時間 2019-11-10

標籤前端 ace editor 代碼編輯器簡易使用示例简体版

原文原文鏈接

身爲一個早已退役的Oier，固然忘不了當年一個個OJ頁面上的代碼顯示和代碼編輯器。javascript

其中，洛谷使用的ACE Editor就是之一，很是的簡潔美觀。以及實際上在前端頁面上搭建一個ACE Editor也是一件很是容易的事html

在通常狀況下，咱們須要引入的js庫是兩個：ace.js，ext-language_tools.js前端

接下來就是按照ACE Editor的官方API指示進行搭建（若是看着有點迷的話，簡易入門在此）java

（注：經筆者測試官方demo仍然存在一些問題，筆者參考了幾個相關的OJ的前端代碼做此總結概括）git

代碼以下（含註釋）：github

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Demo of ACE Editor</title>
 5         <!--導入js庫-->
 6         <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
 7         <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
 8     </head>
 9     
10     <body>
11         <!--代碼輸入框（注意請務必設置高度，不然沒法顯示）-->
12         <pre id="code" class="ace_editor" style="min-height:400px"><textarea class="ace_text-input">
13 #include <cstdio>
14 int main(){
15     int n,m;
16     scanf("%d %d",&n,&m);
17     printf("%d",n+m);
18     return 0;
19 }
20         </textarea></pre>
21 
22         <script>
23             //初始化對象
24             editor = ace.edit("code");
25             
26             //設置風格和語言（更多風格和語言，請到github上相應目錄查看）
27             theme = "clouds"
28             language = "c_cpp"
29             editor.setTheme("ace/theme/" + theme);
30             editor.session.setMode("ace/mode/" + language);
31             
32             //字體大小
33             editor.setFontSize(18);
34             
35             //設置只讀（true時只讀，用於展現代碼）
36             editor.setReadOnly(false); 
37             
38             //自動換行,設置爲off關閉
39             editor.setOption("wrap", "free")
40             
41             //啓用提示菜單
42             ace.require("ace/ext/language_tools");
43             editor.setOptions({
44                     enableBasicAutocompletion: true,
45                     enableSnippets: true,
46                     enableLiveAutocompletion: true
47                 });
48         </script>
49 
50     </body>
51 </html>