<!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. Flutter实战视频-移动电商-13.首页_广告Banner组件制作

    13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 ...

  2. HDU 2586 How far away ？ (LCA，Tarjan， spfa)

    题意:给定N个节点一棵树,现在要求询问任意两点之间的简单路径的距离,其实也就是最短路径距离. 析:用LCA问题的Tarjan算法,利用并查集的优越性,产生把所有的点都储存下来,然后把所有的询问也储存下 ...

  3. SCUTOJ - 362 - CC的族谱 - 树上倍增

    https://scut.online/p/362 和LCA差不多,注意开大点不怕浪费. #include<bits/stdc++.h> using namespace std; type ...

  4. MYSQL5.7版本解决sql_mode=only_full_group_by问题

    在安装有些二开框架时会遇到下面的问题,在填写完数据库密码之后他会提示你请在mysql配置文件中修改ql-mode去掉ONLY_FULL_GROUP_BY,但是我们去mysql的配置文件中查找此配置,有 ...

  5. 算法学习--Day8

    今天重拾算法复习. 今天学习了两个类型的算法——并查集与最小生成树(MST) 简单记录一下并查集的大致内容. 一.并查集的内容大致作用为查找当前图中的点有几个集合. 该算法起到查询分组的情况.通过给定 ...

  6. AtCoder Grand Contest 005【A栈模拟，B单调栈】

    挖草,AtCoder实在是太吊了~ %%%,目前只A了两题: A题: 就是利用栈模拟一下就好了:S进栈,T的话有S就出栈,然后len减一下就好了: #include <bits/stdc++.h ...

  7. tp5 验证器使用

    路径 app\admin\validate\User.php 如果没有则创建该文件夹和文件 User.php <?php namespace app\junyi\validate; use th ...

  8. Unity中HideInInspector和SerializeField

    http://blog.sina.com.cn/s/blog_697b1b8c0102uxvn.html Unity会自动为Public变量做序列化,序列化的意思是说再次读取Unity时序列化的变量是 ...

  9. hdu1850(nim博弈)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1850 题意:中文题诶- 思路:nim博弈 可以将本题抽象成一般nim博弈,那么有: 1. 对于所有元素 ...

  10. [Xcode 实际操作]八、网络与多线程-(6)使用UIApplication对象打开地图

    目录:[Swift]Xcode实际操作 本文将演示如何使用应用程序单例对象,打开地图的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKi ...