身为一个早已退役的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. httpd-2.2 配置及用法完全攻略

    导读 apache是一款稳定的流行的web软件,是linux操作系统中默认的web管理软件.在RHEL/Centos系列中可以用rpm直接进行安装,服务名为httpd.apache有很多设置和调优 的 ...

  2. MapReduce排序输出

    hadoop的map是具有输出自动排序功能的~继续学习~ import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.c ...

  3. Android--消除“Permission is only granted to system apps”错误

    原文:http://blog.csdn.net/gaojinshan/article/details/14230673 在AndroidManifest.xml中使用了如下的配置: <uses- ...

  4. Mock原理学习

    同事搓蛋问了我一个问题,mock的原理是啥,没怎么想出来,于是花了点时间学习了一下. 从Moq这个库入手:https://github.com/moq/moq4 Moq用到了Castle的库用于Dyn ...

  5. 自己动手写http服务器——线程池(一)

    创建一个线程池,每有一个连接对象就将它添加到工作队列中,线程池中的线程通过竞争来取得任务并执行它(它是通过信号量实现的). //filename threadpool.h #ifndef THREAD ...

  6. stl 在 acm中的应用总结

    总结一些在acm中常用的小技巧,小函数 之前尝试着总结过很多次.都失败了,因为总是担心不全,理解的也不是很透彻.这次再来一次...其实之前保存了很多的草稿就不发布了,当然,下面说的很不全面,路过的大牛 ...

  7. 洛谷P3244 [HNOI2015]落忆枫音

    #include<cstdio> #include<cstdlib> #include<algorithm> #include<cstring> #in ...

  8. RxJava操作符(05-结合操作)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51656736 本文出自:[openXu的博客] 目录: CombineLatest Join ...

  9. [译]PEP 342--增强型生成器:协程

    PEP原文 : https://www.python.org/dev/peps/pep-0342/ PEP标题: Coroutines via Enhanced Generators PEP作者: G ...

  10. matlab从曲线图提取数据

    同学用肉体一顿饭让我帮他做下这个DDL 样图是一张非常扭曲的三虚线图他甚至想OCR识别x轴y轴坐标单位 上谷歌查了查,对于曲线图提取数据基本上是手动在曲线上取几个点,然后由这个几个点开始遍历领域点,判 ...