【前端】ACE Editor(代码编辑器) 简易使用示例

身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器。

其中,洛谷使用的ACE Editor就是之一,非常的简洁美观。以及实际上在前端页面上搭建一个ACE Editor也是一件非常容易的事

在一般情况下,我们需要引入的js库是两个:ace.js,ext-language_tools.js

接下来就是按照ACE Editor的官方API指示进行搭建(如果看着有点迷的话,简易入门在此)

(注:经笔者测试官方demo仍然存在一些问题,笔者参考了几个相关的OJ的前端代码作此总结归纳)

代码如下(含注释):

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Demo of ACE Editor</title>
 5         <!--导入js库-->
 6         <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
 7         <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
 8     </head>
 9     
10     <body>
11         <!--代码输入框(注意请务必设置高度,否则无法显示)-->
12         <pre id="code" class="ace_editor" style="min-height:400px"><textarea class="ace_text-input">
13 #include <cstdio>
14 int main(){
15     int n,m;
16     scanf("%d %d",&n,&m);
17     printf("%d",n+m);
18     return 0;
19 }
20         </textarea></pre>
21 
22         <script>
23             //初始化对象
24             editor = ace.edit("code");
25             
26             //设置风格和语言(更多风格和语言,请到github上相应目录查看)
27             theme = "clouds"
28             language = "c_cpp"
29             editor.setTheme("ace/theme/" + theme);
30             editor.session.setMode("ace/mode/" + language);
31             
32             //字体大小
33             editor.setFontSize(18);
34             
35             //设置只读(true时只读,用于展示代码)
36             editor.setReadOnly(false); 
37             
38             //自动换行,设置为off关闭
39             editor.setOption("wrap", "free")
40             
41             //启用提示菜单
42             ace.require("ace/ext/language_tools");
43             editor.setOptions({
44                     enableBasicAutocompletion: true,
45                     enableSnippets: true,
46                     enableLiveAutocompletion: true
47                 });
48         </script>
49 
50     </body>
51 </html>

 效果图(纯本机测试,Notepad++ + Firefox):

 以上代码经过了笔者的亲自测试和精简,希望能够帮到想要快速搭建代码编辑器的码农们^_^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SEO

SEOer必学网站分析神器(全新解析一)

36090
来自专栏小狼的世界

[每天五分钟,备战架构师-10]数据库系统

事务是数据库系统运行的基本工作单位,相当于操作系统中的进程,事务具有ACID特性。从用户的角度来看,事务中的操作要么都做,要么都不做。

13220
来自专栏恰童鞋骚年

.NET Core微服务之基于Ocelot+Butterfly实现分布式追踪

  微服务的特点决定了功能模块的部署是分布式的,以往在单应用环境下,所有的业务都在同一个服务器上,如果服务器出现错误和异常,我们只要盯住一个点,就可以快速定位和...

16830
来自专栏FreeBuf

暴雪游戏存在DNS重绑定漏洞可导致玩家电脑被远程劫持

谷歌安全研究员Tavis Ormandy发现暴雪游戏存在一个严重漏洞,攻击者利用该漏洞针对游戏玩家电脑可实现远程恶意代码执行。“魔兽世界”、“守望先锋”、“暗黑...

30580
来自专栏游戏开发那些事

【UE4游戏开发】安装UE4时报SU-PQR1603错误的解决方法

  马三在开发过程中一直用的都是UE4.9版本(很久没有更新了。),因为功能都够用,所以也懒得去更新。这不最近UE4 发布了最新的4.14版本,本来想尝个鲜,试...

25430
来自专栏字根中文校对软件

BlockHackaThonclub 区块链初学者入门之: metamask

区块链初学者入门之: metamask 环境: 浏览器Chrome ,安装 MetaMask 插件 选择Ropsten Test Nestwork 测试网路...

38690
来自专栏从零开始学 Web 前端

代码阅读——十个C开源项目

Webbench是一个在linux下使用的非常简单的网站压测工具。它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以...

67330
来自专栏腾讯技术工程官方号的专栏

2017 Openstack Days China:虚拟机的IO模型分析

本文将其在2017年7月24日在北京举办的 China Openstack Days 上分享的内容进行整理,内容主要介绍了虚拟机的 IO 流程分析方法,几个特殊...

41320
来自专栏牛肉圆粉不加葱

DriverDisassociated|Lostexecutor

昨天在Spark Sql上执行几条涉及数据量几百G的Sql语句时频繁失败,日志中出现大量以下错误:

12710
来自专栏西枫里博客

宝塔面板下phpMyadmin曝502错误,无法正常使用

前几天修改博客界面,由于本地只有很少几篇测试文章,对内容溢出的测试不完全,虽然复制了一堆无用的内容在里面进行测试。今天就想到把服务器上的数据和本地同步一下。

26710

扫码关注云+社区

领取腾讯云代金券