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

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

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

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

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

代码如下（含注释）：

  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>

效果图（纯本机测试，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. Django 数据库读写分离 分库分表

    多个数据库 配置: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BA ...

  2. 好程序员分享该如何选择background-image和img标签

    好程序员分享该如何选择background-image和img标签,用img标签 如果你希望别人打印页面时候包含这张图片请使用img标签 当这张图片有非常有意义的语义,比如警告图标,请使用img标签及 ...

  3. P3371 【模板】单源最短路径（弱化版）

    // luogu-judger-enable-o2 #include<cstdio> #include<iostream> #include<algorithm> ...

  4. 接口（迭代器） Iterator

    Iterator接口简介 在程序开发中,经常需要遍历集合中的所有元素.针对这种需求,JDK专门提供了一个接口java.util.Iterator.Iterator接口也是Java集合中的一员,但它与C ...

  5. 基于 docker 的redis 主从+哨兵（快速部署）

    很简单(字多的步骤见:http://www.cnblogs.com/vipzhou/p/8580495.html) 1.直接启动3个容器 docker network create --subnet ...

  6. linux ps aux 各列内容说明

    [root@zabbix3 ~]# ps auxUSER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMANDroot ...

  7. python 绘制柱状图

    python 绘制柱状图 import matplotlib.pyplot as plt import numpy as np # 创建一个点数为 8 x 6 的窗口, 并设置分辨率为 80像素/每英 ...

  8. TCP/IP协议、UDP协议、 Http协议

    开放式系统互联通信参考模型(Open System Interconnection Reference Model,缩写为 OSI),简称为OSI模型(OSI model),一种概念模型,由国际标准化 ...

  9. centos7之zabbix的web检测

    一.web监控 Web scenarios(Web 场景)是用来监控Web程序的,可以监控到Web程序的下载速度.返回码及响应时间,还支持把一组连续的Web动作作为一个整体进行监控. 1.web监控的 ...

  10. 1.promethues监控融入k8s

    文档链接地址 https://prometheus.io/docs/prometheus/latest/configuration/configuration/#kubernetes_sd_confi ...