身为一个早已退役的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. 【css】图片垂直水平居中

    一.已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 <!DOCTYPE html> <html> <head> <meta c ...

  2. PHP将汉字转为拼音

    没什么难度,最大的难点应该是需要有一个汉字-拼音库. <?php function spell($str, $ishead=0){ $restr = ''; $str = trim($str); ...

  3. 记一次CPU飙升BUG

    图文地址:https://mp.weixin.qq.com/s?__biz=Mzg3NjEzODQ4NQ==&mid=2247483690&idx=1&sn=7c926f400 ...

  4. 哈尔滨工业大学（威海）第九届ACM程序设计竞赛 Virtual Youtuber

    链接 [https://ac.nowcoder.com/acm/contest/624/G] 题意 其实题意说的辣鸡死了,没有说明确. y is the subsequences that its s ...

  5. [Alpha阶段]测试报告

    [Alpha]阶段测试报告 在测试过程中发现的BUG ​ 在最后的测试阶段中,我们不可避免的遇到了各种各样的BUG.虽然大多数都不是严重的BUG,但是这些细枝末节的问题的堆积,依然会很大程度上降低用户 ...

  6. [题解]玩具谜题(toy)

    玩具谜题(toy) 来源:noip2016 提高组 day1 [题目描述] 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个 ...

  7. 软工+C(5): 工具和结构化（重构中, part 1...)

    // 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 目录: ** 0x01 讨论:工具/轮子 ** 0x02 讨论:结构/演进 ** 0x03 讨论:行为/活动 ** 0x04 ...

  8. ES6 Promise 用法讲解

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  9. a标签 download base64 下载 网络失败

    使用html2canvas 生成尺寸较大 base64 后进行 a标签  download 下载 ,浏览器报网络失败错误 通过谷歌搜索 发现原因是 因为截取尺寸较大  导致生成base64 长度太大 ...

  10. log4j2日志模板

    log4j2.xml <?xml version="1.0" encoding="UTF-8"?> <!--设置log4j2的自身log级别为 ...