<!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. Identity Server 4 原理和实战（完结）_----选看 OpenId Connect 简介

    Identity Procider:身份提供商

  2. 原创｜高逼格企业级MySQL数据库备份方案，原来是这样....

    很多人,这里说的是运维工程师们,一提到写某某方案,很是头疼.不是上某度一统搜索,就是同样一句话在N个群全部群发一遍:“有没有某某方案,可以共享一下的吗??求助,各位大佬们”,估计十有八九,全部石沉大海 ...

  3. node代理网络请求

    server.js var express = require('express') var axios = require('axios') var port = 9000; var app = e ...

  4. 模板 - n个数的乘法逆元

    这道题里面不用保存 inva[i] ,而且还卡常.事实证明快读快到飞起, #include<bits/stdc++.h> using namespace std; typedef long ...

  5. 洛谷 - P2424 - 约数和 - 整除分块

    https://www.luogu.org/problemnew/show/P2424 记 \(\sigma(n)\) 为n的所有约数之和,例如 \(\sigma(6)=1+2+3+6=12\) . ...

  6. POJ1088滑雪（记忆化搜索）

    就是用DP,DP[i][j]是在这个(i,j)位置作为起点的最长长度. 因为可能会超时,DP的话每次就是记录,然后就不用回溯了. 很简单的DFS里面的记忆化搜索. #include <stdio ...

  7. 笔记-JavaWeb学习之旅4

    JDBC: 概念:Java DataBase Connectivity Java 数据库连接,Java语言操作数据库 本质:其实是官方(sun公司)定义的一套操作所有关系型数据库的规则,即接口,各个数 ...

  8. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  9. python 基础(十一) pickle 序列化

    一.pickle序列化的操作 使用说明:可以将数据 转换成2进制 写入到文件中 或者之间返回 做到将数据原样写入 原样取出 import pickle (1) dump 写入文件中 pickle.du ...

  10. CVE-2017-5638——S2-045

    一. 漏洞简介 Apache Struts是美国阿帕奇(Apache)软件基金会负责维护的一个开源项目,是一套用于创建企业级Java Web 应用的开源MVC框架,主要提供两个版本框架产品: Stru ...