身为一个早已退役的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. HDU-1862-EXCEL排序

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1862 这个题考的就是你对sort函数的掌握:会用sort函数对字符串,数字排序,只要懂得话题目很简单 ...

  2. C# backgroundworker使用方法

    # BackgroundWorker 控件的几个实例(C# backgroundworker使用方法): 在 WinForms 中,有时要执行耗时的操作,在该操作未完成之前操作用户界面,会导致用户界面 ...

  3. 关于Vue.js 使用v-cloak后仍显示变量的解决方法

    v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cl ...

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

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

  5. 转：C# Process.Start()方法详解

    http://blog.csdn.net/czw2010/article/details/7896264 System.Diagnostics.Process.Start(); 能做什么呢?它主要有以 ...

  6. We Chall-Encodings: URL -Writeup

    MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...

  7. 快速排序时间复杂度为O（n×log（n））的证明

    快速排序时间复杂度为O(n×log(n))的证明 之前只知道快速排序的平均时间复杂度为O(n×log(n)),最糟糕时复杂度为O(n^2),但却不知道具体原因,今天好好证明一下,最后部分摘自<算 ...

  8. IOS之TableViewCell重用机制解决上下刷新重复显示

    首先我是一个经验浅薄的iOS开发人员,这个问题想必许多初学者经常遇到这些问题,在面试中也会经常问到.现在我们一一解决. 首先我们要知道TableViewCell重用机制的原理是什么,我们抽象的理解为古 ...

  9. Unity编程标准导引-1.2官方资源介绍

    1.2.官方资源介绍 Unity官方提供了丰富的学习和参考资源,有以下类别: Unity手册以及API文档 Unity的官方教程 AssetStore 1.2.1 Unity手册以及API文档 前述文 ...

  10. phpcmsV9于基本介绍

    1.phpcms做企业站 2.内容+管理栏目=页面显示的导航 3.文件目录结构 根目录 api 接口文件目录 caches 缓存文件目录 confings 系统配置文件目录 caches_*系统缓存目 ...