身为一个早已退役的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. VS与Windbg调试

    原文 :  https://blog.csdn.net/fin86889003/article/details/20126593 原文 :  https://blog.csdn.net/u014339 ...

  2. CSAPP：第十二章 并发编程

    CSAPP:第十二章 并发编程 12.1 线程执行模型12.2 多线程之间并发通信12.3 其他并发问题   使用应用级并发的应用程序称为并发程序.现代操作系统提供三种基本的构造并发程序的方法: 进程 ...

  3. gVim编辑器 模板篇

    上文介绍了gVim的常用操作,这次总结一下我自己常用的模板. 安装和配置好gVim后,在Program Files (x86)\Vim目录下有个“_vimrc”文件,双击选择gVim软件打开,在里面添 ...

  4. dump解析入门-用VS解析dump文件进行排障

    突然有一天部署在服务器的一个应用挂掉了,没办法只能进入服务器打开 [事件查看器]查看下,好不容易找到了打开后一脸懵逼 事件查看器查到的内容根本对我们排障没有任何作用. 在这个时候如果有对应的dump文 ...

  5. [转帖]windows10,business版和consumer版本区别

    windows10,business版和consumer版本区别 时间:2018-07-08 10:50来源:原创 作者:5分享 点击: 7113 次 windows10系统(1803)busines ...

  6. Windows elasticsearch1.5.1安装

    http.cors.enabled: true http.cors.allow-origin: /.*/ network.host: 192.168.2.200 http.port: cluster. ...

  7. 记录BigInteger犯过的一个错误

    2019年4月18号,面试遇到的面试题,当时做错了,纪念下. public class StrTest { public static void main(String[] args) { BigIn ...

  8. jsonp 实现前端跨域

    1.基于ajax 发起jsonp 请求. 前端代码: let url = 'http://localhost:8001/'; $.ajax({ type: 'get', dataType: 'json ...

  9. SpringBoot自动装配源码解析

    序:众所周知spring-boot入门容易精通难,说到底spring-boot是对spring已有的各种技术的整合封装,因为封装了所以使用简单,也因为封装了所以越来越多的"拿来主义" ...

  10. [洛谷P1650] 田忌赛马

    贪心难题:总结贪心问题的一般思路 传送门:$>here<$ 题意 田忌和齐王各有n匹马,赛马时一一对应.赢+200,输-200,平+0. 问最多多少钱? 数据范围:$n \leq 2000 ...