身为一个早已退役的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. 如何用VSCode手动编译Ace Editor

    对于习惯微软VS的用户,可能很不习惯开源社区兴起的前端开发流程.随着NodeJs的兴起,JavaScript已经成为Github上开源项目最多的语言.使用微软提供的VSCode可以很好地利用这些开源项 ...

  3. codemirror和ace editor的语法高亮

    两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...

  4. ace editor 使用教程

    <!DOCTYPE html><html> <head> <title>Demo of ACE Editor</title> <!-- ...

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

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

  6. Ace editor中文文档

    介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器.它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配.它可以轻松地嵌入任何网页和JavaScript应用程序中. ...

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

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

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

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

  9. C# 网络编程之简易聊天示例

    还记得刚刚开始接触编程开发时,傻傻的将网站开发和网络编程混为一谈,常常因分不清楚而引为笑柄.后来勉强分清楚,又因为各种各样的协议端口之类的名词而倍感神秘,所以为了揭开网络编程的神秘面纱,本文尝试以一个 ...

随机推荐

  1. CRS-2800 CRS-4000

    I was installing Clusterware using ASM on VMware shared disks.  When I created the independent persi ...

  2. 在ubuntu下增加root用户并登录

    1.打开终端. 2.输入sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 3.在弹出的编辑框里输入:greeter-show-ma ...

  3. MapReduce深度分析(二)

    MapReduce深度分析(二) 五.JobTracker分析 JobTracker是hadoop的重要的后台守护进程之一,主要的功能是管理任务调度.管理TaskTracker.监控作业执行.运行作业 ...

  4. Jsoup后台解析html、jsp网页

    在一些网络爬虫或者从第三方网站抓取信息的程序都面临1个问题,如何从网页中把所需的信息提取出来,Jsoup是个比较好的选择,它能把网站内容解析成Document,再从document中取element就 ...

  5. 如何使用矩阵乘法加速动态规划——以[SDOI2009]HH去散步为例

    对这个题目的最初理解 开始看到这个题,觉得很水,直接写了一个最简单地动态规划,就是定义 f[i][j]为到了i节点路径长度为j的路径总数, 转移的话使用Floyd算法的思想去转移,借助这个题目也理解了 ...

  6. AFN

    一.什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装 虽然运行效率没有ASI高,但是使用比ASI简单 在iOS开发中,使用比较广泛 AFN的github地址 ...

  7. ECMAScript 6 笔记（三）

    ES6中的基本扩展 一.函数的扩展 1. 函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console ...

  8. linux pagecache与内存占用

    实验环境 CentOS Linux release 7.3.1611 (Core)  3.10.0-514.6.1.el7.x86_64   一.概念介绍      linux系统中通常使用free命 ...

  9. Quartz_理解1

    一.引言 quratz是目前最为成熟,使用最广泛的java任务调度框架,功能强大配置灵活.在企业应用中占重要地位.quratz在集群环境中的使用方式是每个企业级系统都要考虑的问题.早在2006年,在I ...

  10. QQ18年，解密8亿月活的QQ后台服务接口隔离技术

    作者:shane,腾讯后台开发高级工程师 QQ18年 1999年2月10日,腾讯QQ横空出世.光阴荏苒,那个在你屏幕右下角频频闪动的企鹅已经度过了18个年头.随着QQ一同成长的你,还记得它最初的摸样吗 ...