【前端】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也是 ...
- 【前端】wangEditor（富文本编辑器） 简易使用示例
转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...
- ACE Editor在线代码编辑器简介及使用引导
转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...
- 前端代码编辑器ace 语法高亮
代码编辑器codemirror和ace,都有接触过,主要是简单的api使用下.现在项目选用的ace.主要结合官网的文档,加入些自己的理解.官方原文链接https://ace.c9.io/#nav=hi ...
- 前端代码编辑器ace 语法验证
本文主要是介绍实际项目中如何加入语法检测功能.官方文档链接https://github.com/ajaxorg/ace/wiki/Syntax-validation 代码编辑器ace,使用webwor ...
- 集成代码编辑器ACE的经验
ACE是最流行的在线代码编辑器之一,在CanTK的集成开发环境GameBuilder里也使用了ACE.ACE的功能非常强大,但是由于使用方法不当,大家反映GameBuilder的代码编辑器不好用.最近 ...
- ACE 1.1.9 发布，开源云端代码编辑器
点这里 ACE 1.1.9 发布,开源云端代码编辑器 oschina 发布于: 2015年04月06日 (1评) 分享到: 收藏 +25 4月18日 武汉 源创会开始报名,送华为开发板 ACE ...
- 在线编辑器ACE Editor的使用
ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...
- [转]Unity3D Editor 编辑器简易教程
Star 自定义编辑器简易教程 an introduction to custom editors 原文地址 http://catlikecoding.com/unity/tutorials/star ...
随机推荐
- windows下mysql 5.7以上版本安装及遇到的问题
(原) 早些前用window安装mysql挺简单的,一个安装程序,一路下一步. 2006的5.0版本,确实太早了点. 于是官网上又下了一个版本,windows也是提供了二个版本Installer(安装 ...
- 文本相似度 — TF-IDF和BM25算法
1,$TF-IDF$算法 $TF$是指归一化后的词频,$IDF$是指逆文档频率.给定一个文档集合$D$,有$d_1, d_2, d_3, ......, d_n \in D$.文档集合总共包含$m$个 ...
- Linux新手随手笔记1.7
配置网卡(本地电脑) Vment1 仅主机模式 Vment8 nat模式 物理机 : 192.16810.1 /255.255.255.0 服务器 : 192.168.10.10 /255. ...
- UltraEdit文本行数多变一和一边多
一.UltraEdit文本行数多行转换成一行 1.文本样式内容 1.qwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiop ...
- Python selenium —— 一定要会用selenium的等待，三种等待方式解读
发现太多人不会用等待了,博主今天实在是忍不住要给大家讲讲等待的必要性. 很多人在群里问,这个下拉框定位不到.那个弹出框定位不到…各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加 ...
- pytorch识别CIFAR10：训练ResNet-34（微调网络，准确率提升到85%）
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 在前一篇中的ResNet-34残差网络,经过训练准确率只达到80%. 这里对网络做点小修改,在最开始的 ...
- Appium 服务器初始化参数（Capability）
键 描述 值 automationName 自动化测试的引擎 Appium (默认)或者 Selendroid platformName 使用的手机操作系统 iOS, Android, 或者 Fire ...
- vue 倒计时组件
<template> <span> <i v-text="msg"></i> </span></template& ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
- 「洛谷3870」「TJOI2009」开关【线段树】
题目链接 [洛谷] 题解 来做一下水题来掩饰ZJOI2019考炸的心情QwQ. 很明显可以线段树. 维护两个值,\(Lazy\)懒标记表示当前区间是否需要翻转,\(s\)表示区间还有多少灯是亮着的. ...