ACE Editor 常用Api(转)
ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。
ACE是Mozilla Skywriter(以前称为Bespin)项目的继任者,并作为Cloud9的主要在线编辑器。
以下是它的详细特性:
- 可以对60多种语言进行语法着色(可以导入TextMate/Sublime/.tmlanguage 文件)
- 20多种主题(可以导入TextMate/Sublime/.tmtheme文件)
- 自动缩进,减少缩进
- 一个可选的命令行
- 处理巨大的文件,可以处理4,000,000行代码
- 完全自定义的键绑定,包括V正则表达式搜索和替换
- 高亮匹配括号
- 软标签和真正的标签之间切换
- 显示隐藏的字符
- 用鼠标拖放文本
- 换行
- 代码折叠
- 多个光标和选择
- 实时语法检查器(支持 JavaScript/CoffeeScript/CSS/XQuery)
- 剪切,复制和粘贴功能IM和Emacs模式
项目地址:
- git clone git://github.com/ajaxorg/ace.git
相关项目:
使用引导:
1、引入
- var ace = require("lib/ace");
2、设置主题
- editor.setTheme("ace/theme/twilight");
3、设置程序语言模式
- editor.getSession().setMode("ace/mode/javascript");
4、一般常用操作
设置、获取内容:
- editor.setValue("the new text here"); // or session.setValue
- editor.getValue(); // or session.getValue
获取选择内容:
- editor.session.getTextRange(editor.getSelectionRange());
在光标处插入:
- editor.insert("Something cool");
获取光标所在行或列:
- editor.selection.getCursor();
跳转到行:
- editor.gotoLine(lineNumber);
获取总行数:
- editor.session.getLength();
设置默认制表符的大小:
- editor.getSession().setTabSize(4);
使用软标签:
- editor.getSession().setUseSoftTabs(true);
设置字体大小,这个其实不算API:
- document.getElementById('editor').style.fontSize='12px';
设置代码折叠:
- editor.getSession().setUseWrapMode(true);
设置高亮:
- editor.setHighlightActiveLine(false);
设置打印边距可见度:
- editor.setShowPrintMargin(false);
设置编辑器只读:
- editor.setReadOnly(true); // false to make it editable
5、触发尺寸缩放
编辑器默认自适应大小,如果要程序控制resize,使用如下方法:
- editor.resize();
6、搜索
- editor.find('needle',{
- backwards: false,
- wrap: false,
- caseSensitive: false,
- wholeWord: false,
- regExp: false
- });
- editor.findNext();
- editor.findPrevious();
下列选项可用于您的搜索参数:
needle: 要查找的字符串或正则表达式
backwards: 是否反向搜索,默认为false
wrap: 搜索到文档底部是否回到顶端,默认为false
caseSensitive: 是否匹配大小写搜索,默认为false
wholeWord: 是否匹配整个单词搜素,默认为false
range: 搜索范围,要搜素整个文档则设置为空
regExp: 搜索内容是否是正则表达式,默认为false
start: 搜索起始位置
skipCurrent: 是否不搜索当前行,默认为false
替换单个字符:
- editor.find('foo');
- editor.replace('bar');
替换多个字符:
- editor.replaceAll('bar');
editor.replaceAll使用前需要先调用editor.find('needle', ...)
7、事件监听
监听改变事件:
- editor.getSession().on('change', function(e) {
- // e.type, etc
- });
监听选择事件:
- editor.getSession().selection.on('changeSelection', function(e) {
- });
监听光标移动:
- editor.getSession().selection.on('changeCursor', function(e) {
- });
8、添加新命令、绑定按键
要指定键绑定到一个自定义函数:
- editor.commands.addCommand({
- name: 'myCommand',
- bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
- exec: function(editor) {
- //...
- },
- readOnly: true // 如果不需要使用只读模式,这里设置false
- });
详细API:http://ace.c9.io/#nav=api
原文链接:http://www.cnblogs.com/cz-xjw/p/6476179.html
ACE Editor 常用Api(转)的更多相关文章
- 【前端】ACE Editor 简易使用示例
身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...
- 常用API接口汇总
下面列举了100多个国内常用API接口,并按照 笔记.出行.词典.电商.地图.电影.即时通讯.开发者网站.快递查询.旅游.社交.视频.天气.团队协作.图片与图像处理.外卖.消息推送.音乐.云.语义识别 ...
- 【前端】ACE Editor(代码编辑器) 简易使用示例
身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- compass General 常用api学习[Sass和compass学习笔记]
compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 ...
- java基础3.0:Java常用API
本篇介绍Java基础中常用API使用,当然只是简单介绍,围绕重要知识点引入,巩固开发知识,深入了解每个API的使用,查看JavaAPI文档是必不可少的. 一.java.lang包下的API Java常 ...
- codemirror和ace editor的语法高亮
两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...
- C++ 中超类化和子类化常用API
在windows平台上,使用C++实现子类化和超类化常用的API并不多,由于这些API函数的详解和使用方法,网上一大把.本文仅作为笔记,简单的记录一下. 子类化:SetWindowLong,GetWi ...
- node.js整理 02文件操作-常用API
NodeJS不仅能做网络编程,而且能够操作文件. 拷贝 小文件拷贝 var fs = require('fs'); function copy(src, dst) { fs.writeFileSync ...
- js的常用api
JavaScript常用API总结 原创 2016-10-02 story JavaScript 下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属 ...
随机推荐
- Cloud9 3.0 SDK安装
Cloud9 IDE是一个基于Node.JS构建的JavaScript程序开发Web IDE.它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示.Cloud9 ...
- No.1.2
列表标签 无序列表 标签名 说明 ul 表示无序列表的整体,用于包裹li标签 li 表示无序列表的每一项,用于包含每一行的内容 有序列表 标签名 说明 ol 表示有序列表的整体,用于包裹li标签 li ...
- fastadmin打包插件
<?php namespace app\command; use think\console\Command; use think\console\Input; use think\consol ...
- js中构造函数中this指向问题
构造函数构造函数中的this指向new创建的新对象function FOO(name) {this.name = name;console.log(this) // Foo {name: " ...
- python对象的三要素
id() 函数返回对象的唯一标识符,标识符是一个整数. 返回值 :返回对象的内存地址. >>>a = 'runoob' >>> id(a) 4531887632 i ...
- hashMap 获取里面value最大的值得key
public static void main(String[] args) { Map<String, Integer> map = new HashMap(); map.put(&qu ...
- Net6的核心组件之中间件
Net6的核心组件之中间件 What is Middleware? 1.广义上来讲:Tomcat.WebLogic.Redis.IIS:狭义上来讲,ASP.NET Core中的中间件指ASP.NET ...
- vue 的生命周期
生命周期就是 vue 从开始创建到销毁的过程,分为四大步(创建,挂载, 更新,销毁),每一步又分为两小步,如 beforeCreate,created.beforeCreate 前,也就是 new V ...
- Java集合-LinkedHashSet
LinkedHashSet 重点: LinkedHashSet 不允许重复元素,与 HashSet的区别是:它是有序的 LinkedHashSet 底层结构是 数组table + 双向链表 [介绍] ...
- 解决未定义的count键“报错为:"Uncaught ReferenceError: count is not defined"
报错: 源码:Vuex仓库.js let state = { count } export default state 解决:未赋值的count键