【前端】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）：

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

转载于:https://www.cnblogs.com/HansBug/p/6546606.html

【前端】ACE Editor（代码编辑器）简易使用示例相关推荐

WebRTC与Ace在线代码编辑器合作，实现实时协作编程
为什么80%的码农都做不了架构师?>>> 日期:2013-5-17 来源:GBin1.com 距离WebRTC真正的应用到一些很酷的应用中还有一段时日,但是即便是这样,很多开 ...
Vue3中使用Monaco Editor代码编辑器记录～持续更新
Vue3中使用Monaco Editor代码编辑器记录-持续更新因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器前端框架使用Vue3 + elementUI m ...
Ace(在线代码编辑器)介绍、使用
介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器.它与Sublime,Vim和TextMate等本机编辑器的功能和性能相匹配.它可以轻松地嵌入任何网页和JavaScript应用程序中. ...
GPS 校验和代码_PSPad editor(代码编辑器)v5.0.4.507绿色版
PSPad editor 多功能文本编辑器,非常适用于编写程序代码,支持高亮html.VB.C++.SQL.Pascal.JS.PHP.ASP.Python等语言代码,具有十六进制与ASCII表等编辑 ...
Vue中使用Monaco Editor代码编辑器
一.安装依赖 npm install editor@1.0.0 npm install monaco-editor@0.19.3 npm install monaco-editor-webpack-p ...
au如何关闭预览编辑器_在线IDE开发入门之从零实现一个在线代码编辑器
前言 3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写.运行和调试代码,它可以直接运行在浏览器中,也就是传说中的 Web IDE.3年后的今天随着国内云计算的 ...
百度地图示例左侧的代码编辑器Ace Editor
之前用百度地图的时候,看到左侧有个代码编辑器不错,开始的时候不知道是个啥玩意,现在发现原来是个在线的代码编辑器,就像vim,sublime,只不过是在线的,有点意思.官网地址:https://ace. ...
html ace编辑器,Springboot 集成 Ace editor前端编辑器
一.引入Ace editor 本质上Ace editor只是一个js而已.而该js引用了其他js(如扩展.主题等js),因此将ace editor.js引入项目时最好复制整个文件夹,不能只复制一个ac ...
代码编辑器——ace 插件
Ace 是用 JavaScript 编写的代码编辑器. react-ace 已经不被维护了,他们的团队转而开发维护更为强大的 ace-builds 了. ace 嵌入网页示例:ace-builds/e ...
Unity3D Editor 编辑器简易教程
Star 自定义编辑器简易教程 an introduction to custom editors 原文地址 http://catlikecoding.com/unity/tutorials/star ...

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

【前端】ACE Editor（代码编辑器）简易使用示例相关推荐

最新文章

热门文章

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

【前端】ACE Editor（代码编辑器） 简易使用示例相关推荐

最新文章

热门文章

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

【前端】ACE Editor（代码编辑器）简易使用示例相关推荐