<!DOCTYPE html>
<html>
<head>
<title>Demo of ACE Editor</title>
<!--导入js库-->
<script src="ace-builds-master/src/ace.js"></script>
<script src="ace-builds-master/src/ext-language_tools.js"></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>

ace editor 使用教程的更多相关文章

  1. codemirror和ace editor的语法高亮

    两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...

  2. 【前端】ACE Editor 简易使用示例

    身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...

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

    身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...

  4. 如何用VSCode手动编译Ace Editor

    对于习惯微软VS的用户,可能很不习惯开源社区兴起的前端开发流程.随着NodeJs的兴起,JavaScript已经成为Github上开源项目最多的语言.使用微软提供的VSCode可以很好地利用这些开源项 ...

  5. 【原创】【2】rich editor系列教程。了解document.execommand操作，保存丢失的range，实时反馈样式给工具栏

    [原创][2]rich editor系列教程.了解document.execommand操作,保存丢失的range,实时反馈样式给工具栏 索引目录:http://www.cnblogs.com/hen ...

  6. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  7. ACE Editor在线代码编辑器简介及使用引导

    转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...

  8. 【原创】【1】rich editor系列教程。前期准备，兼容

    [1]前期准备,兼容 索引目录:http://www.cnblogs.com/henryli/p/3439642.html rich editor的原理无非是启用iframe的编辑模式或者div的co ...

  9. windows下ACE安装使用教程（转）

    ACE简介:ACE是一个跨平台的用于并发通信的C++框架.它提供了丰富的C++封装器和框架组件.使用ACE,开发者可以开发出高性能,实时的通信服务和应用.ACE利用进程间通信,事件分离,动态链接和并发 ...

随机推荐

  1. jquery的on()绑定无效的方式

    on前面的元素也必须在页面加载的时候就存在于dom里面.动态的元素或者样式等,可以放在on的第二个参数里面 jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态 ...

  2. 创建Sitemap文件供搜索引擎使用

    以下内容转载自 http://www.cnblogs.com/webtrados/archive/2009/12/29/1635305.html 如何创建Sitemap文件 Sitemap的格式有XM ...

  3. Codeforces Round #377 (Div. 2)A,B,C,D【二分】

    PS:这一场真的是上分场,只要手速快就行.然而在自己做的时候不用翻译软件,看题非常吃力非常慢,还有给队友讲D题如何判断的时候又犯了一个毛病,一定要心平气和,比赛也要保证,不要用翻译软件做题: Code ...

  4. hdu1847(sg函数&yy)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1847 题意:中文题诶- 思路:直接sg函数打表即可,观察打表的结果发现是有规律的,sg函数的值只为0, ...

  5. [Xcode 实际操作]九、实用进阶-(27)字符串文件(Localizable.strings)的本地化

    目录:[Swift]Xcode实际操作 本文将演示字符串文件(Localizable.strings)的本地化. 在项目[DemoApp]文件夹下点击鼠标右键,弹出右键菜单 ->[New Fil ...

  6. SpringBoot 2.0 整合sharding-jdbc中间件，实现数据分库分表

    一.水平分割 1.水平分库 1).概念: 以字段为依据,按照一定策略,将一个库中的数据拆分到多个库中. 2).结果 每个库的结构都一样:数据都不一样: 所有库的并集是全量数据: 2.水平分表 1).概 ...

  7. mybatis二级缓存

    二级缓存区域是根据mapper的namespace划分的,相同namespace的mapper查询数据放在同一个区域,如果使用mapper代理方法每个mapper的namespace都不同,此时可以理 ...

  8. Android近场通信---NFC基础（三）（转）

    转自 http://blog.csdn.net/think_soft/article/details/8180203 过滤NFC的Intent 要在你想要处理被扫描到的NFC标签时启动你的应用程序,可 ...

  9. jstl标签库jar包下载

  10. Zynq7000开发系列-5（OpenCV开发环境搭建：Ubuntu、Zynq）

    操作系统:Ubuntu14.04.5 LTS 64bit OpenCV:OpenCV 3.1.0.opencv_contrib gcc:gcc version 4.8.4 (Ubuntu 4.8.4- ...