【前端】ACE Editor 简易使用示例
身为一个早已退役的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 简易使用示例的更多相关文章
- 【前端】ACE Editor（代码编辑器） 简易使用示例
身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...
- 如何用VSCode手动编译Ace Editor
对于习惯微软VS的用户,可能很不习惯开源社区兴起的前端开发流程.随着NodeJs的兴起,JavaScript已经成为Github上开源项目最多的语言.使用微软提供的VSCode可以很好地利用这些开源项 ...
- codemirror和ace editor的语法高亮
两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...
- ace editor 使用教程
<!DOCTYPE html><html> <head> <title>Demo of ACE Editor</title> <!-- ...
- 【前端】wangEditor（富文本编辑器） 简易使用示例
转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...
- Ace editor中文文档
介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器.它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配.它可以轻松地嵌入任何网页和JavaScript应用程序中. ...
- 在线编辑器ACE Editor的使用
ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...
- ACE Editor在线代码编辑器简介及使用引导
转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...
- C# 网络编程之简易聊天示例
还记得刚刚开始接触编程开发时,傻傻的将网站开发和网络编程混为一谈,常常因分不清楚而引为笑柄.后来勉强分清楚,又因为各种各样的协议端口之类的名词而倍感神秘,所以为了揭开网络编程的神秘面纱,本文尝试以一个 ...
随机推荐
- 上传预览 easyui部分控件获取focuse 表单验证
js: $(document).ready(function () { //$('#creater').combobox({ // url: '/VMS.UI/BindData/ScheamData? ...
- Mac 安装Rudy环境 pod安装前的准备工作
之前已经说过怎么使用pod 今天说一下安装pod之前的准备工作 首先呢就是Rudy 环境(前提是你已经安装了Xcode) 在终端输入一下命令 期间可能也许会要你输入密码 curl -L https:/ ...
- Storm InvalidTopologyException: null
异常信息: backtype.storm.generated.InvalidTopologyException: null at backtype.storm.daemon.common$valida ...
- jQuery Deferred和Promise的使用介绍：
deferred对象是从jquery1.5.0引入的一个新对象,ES6也引入了Promise的正式规范. 抽象来说,deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式,相比于阻塞 ...
- fir.im Weekly - 2017 年必须了解的 iOS 开源库
放假的脚步临近,每个人都在期待一个愉悦的春节假期.最近,@张嘉夫 分享了一篇 Medium 上的文章<33 个 2017 年必须了解的 iOS 开源库>,总结了 2016 年最棒的 iOS ...
- Wireshark网络抓包(三)——网络协议
一.ARP协议 ARP(Address Resolution Protocol)地址解析协议,将IP地址解析成MAC地址. IP地址在OSI模型第三层,MAC地址在OSI第二层,彼此不直接通信: 在通 ...
- Kafka 0.8源码分析—ZookeeperConsumerConnector
1.HighLevelApi High Level Api是多线程的应用程序,以Topic的Partition数量为中心.消费的规则如下: 一个partition只能被同一个ConsumersGrou ...
- 自己开发轻量级ORM（一）
在开发ORM之前,先简单的介绍下ORM的基本概念. 对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的 ...
- OVS VxLAN Flow 分析 - 每天5分钟玩转 OpenStack（149）
OVS 的数据流向都是由 Flow 规则控制的,今天我们就来分析 VxLAN 的 Flow 规则.提个醒:这可能是本教程最烧脑的一节,let's rock it ! 下面分析控制节点上的 flow r ...
- AFNetworking2.0和AFNetworking3.0 的HTTPS的配置
前言: 由于苹果声明在前说是2017.01.01之后提交审核的APP,必须使用HTTPS请求,要不就直接驳回审核,吓得我们年前赶紧提交了一个版本,想着年后在弄这个https,结果又有消息说是苹果推迟了 ...