使用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