身为一个早已退役的Oier，当然忘不了当年一个个OJ页面上的代码显示和代码编辑器。

其中，洛谷使用的ACE Editor就是之一，非常的简洁美观。以及实际上在前端页面上搭建一个ACE Editor也是一件非常容易的事

在一般情况下，我们需要引入的js库是两个：ace.js，ext-language_tools.js

接下来就是按照ACE Editor的官方API指示进行搭建（如果看着有点迷的话，简易入门在此）

（注：经笔者测试官方demo仍然存在一些问题，笔者参考了几个相关的OJ的前端代码作此总结归纳）

代码如下（含注释）：

 <!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 = "c_cpp"

             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>

效果图（纯本机测试，Notepad++ + Firefox）：

以上代码经过了笔者的亲自测试和精简，希望能够帮到想要快速搭建代码编辑器的码农们^_^

【前端】ACE Editor（代码编辑器） 简易使用示例的更多相关文章

  1. 【前端】ACE Editor 简易使用示例

    身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...

  2. 【前端】wangEditor（富文本编辑器） 简易使用示例

    转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...

  3. ACE Editor在线代码编辑器简介及使用引导

    转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...

  4. 前端代码编辑器ace 语法高亮

    代码编辑器codemirror和ace,都有接触过,主要是简单的api使用下.现在项目选用的ace.主要结合官网的文档,加入些自己的理解.官方原文链接https://ace.c9.io/#nav=hi ...

  5. 前端代码编辑器ace 语法验证

    本文主要是介绍实际项目中如何加入语法检测功能.官方文档链接https://github.com/ajaxorg/ace/wiki/Syntax-validation 代码编辑器ace,使用webwor ...

  6. 集成代码编辑器ACE的经验

    ACE是最流行的在线代码编辑器之一,在CanTK的集成开发环境GameBuilder里也使用了ACE.ACE的功能非常强大,但是由于使用方法不当,大家反映GameBuilder的代码编辑器不好用.最近 ...

  7. ACE 1.1.9 发布，开源云端代码编辑器

    点这里 ACE 1.1.9 发布,开源云端代码编辑器 oschina 发布于: 2015年04月06日 (1评) 分享到:    收藏 +25 4月18日 武汉 源创会开始报名,送华为开发板 ACE ...

  8. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  9. [转]Unity3D Editor 编辑器简易教程

    Star 自定义编辑器简易教程 an introduction to custom editors 原文地址 http://catlikecoding.com/unity/tutorials/star ...

随机推荐

  1. AppCan移动开发技巧：3步走，获取移动APP签名信息

    大家知道,在移动APP开发里,与应用包名一样,应用的签名信息需是唯一的,否则将会出现应用冒领.重复安装等问题.之前分享过安卓应用的签名如何获取(点击查看),这里将继续以AppCan平台为例,分享如何获 ...

  2. matlab函数int2str, num2str, str2num

    函数名:int2str 功能:将整数值转换为字符串 输入格式:str = int2str(N) 备注:就将该值四舍五入后转换为字符串,接受向量和矩阵输入. 如果是向量和矩阵输入,列数字之间会补加两个空 ...

  3. 毕业设计(2):基于MicroPython的家庭可燃气体泄露微信报警器

    在我们平时的生活中,经常看到因气体泄漏发生爆炸事故的新闻.房屋起火.人体中毒等此类的新闻报道层出不穷.这种情况下,人民就发明了可燃气体报警器.当工业环境.日常生活环境(如使用天然气的厨房)中可燃性气体 ...

  4. SQL进阶随笔--case用法（二）

    ---恢复内容开始--- 用 CHECK 约束定义多个列的条件关系 今天来说下check和case的用法.其实,CASE 表达式和 CHECK 约束是很般配的一对组合.也许有很多数据库工程师不怎么用 ...

  5. <generatePublisherEvidence> 元素

    <configuration> <runtime> <generatePublisherEvidence enabled="false"/> & ...

  6. jvm调优参数

    堆溢出测试args:-verbose:gc -Xms20M -Xmx20M -XX:+PrintGCDetails 栈层级不足args:-Xss128k 常量池内存溢出args : -XX:PermS ...

  7. CBV源码分析

    1 在views中写一个类,继承View,里面写get方法,post方法 2 在路由中配置: url(r'^test/', views.Test.as_view()),实际上第二个参数位置,放的还是一 ...

  8. 执行Git命令时出现各种 SSL certificate problem 的解决办法

    执行Git命令时出现各种 SSL certificate problem 的解决办法 来源  https://www.cnblogs.com/chenzc/p/5842932.html 比如我在win ...

  9. 镜像站nginx

    server { listen 80 default_server; charset utf-8; server_name monitor.autoai.com; access_log /srv/lo ...

  10. java并发编程 | 锁详解：AQS，Lock，ReentrantLock，ReentrantReadWriteLock

    原文:java并发编程 | 锁详解:AQS,Lock,ReentrantLock,ReentrantReadWriteLock 锁 锁是用来控制多个线程访问共享资源的方式,java中可以使用synch ...