使用Ace Editor實現 一個HTML在線代碼編輯器


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、運行結果 (還有代碼提示功能哦。截圖沒截上去)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM