ACE Editor在线代码编辑器简介及使用引导
转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html
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
ACE Editor在线代码编辑器简介及使用引导的更多相关文章
- 【前端】ACE Editor(代码编辑器) 简易使用示例
身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...
- JS在线代码编辑器多种方案monaco-editor,vue-monaco-editor
前言 JavaScript在线代码编辑器. 需要代码提示,关键字高亮,能够格式化代码.(不需要在线运行) 简简单单的需求. 方案一: Monaco-editor 简介:微软的开源项目,开源中国上面的在 ...
- (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定
本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...
- Asp.Net Core 使用Monaco Editor 实现代码编辑器
在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...
- 20个最强的基于浏览器的在线代码编辑器 - OPEN资讯
20个最强的基于浏览器的在线代码编辑器 - OPEN资讯 20个最强的基于浏览器的在线代码编辑器
- Js的在线代码编辑器:CodeMirror
github地址:https://github.com/codemirror/CodeMirror/tree/master/demo 里面包含需要的js.css文件以及大量的示例 官网:https:/ ...
- 在线代码编辑器CodeMirror简介
1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...
- CodeMirror在线代码编辑器使用
CodeMirror官网地址为:https://codemirror.net/ CodeMirror作为一款代码编辑器,其应用场景主要是在线网站写代码.如现在的leetcode.洛谷.code-vs等 ...
- 在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:
随机推荐
- PAT 甲级1001 A+B Format (20)(C++ -思路)
1001 A+B Format (20)(20 分) Calculate a + b and output the sum in standard format -- that is, the dig ...
- PAT 1022 D进制的A+B (20)(20 分)
输入两个非负10进制整数A和B(<=2^30^-1),输出A+B的D (1 < D <= 10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 输出格式: 输出A+B ...
- JVM 类加载器 (二)
1.类加载器(ClassLoader)负责加载class文件,class文件在文件开头有特定的文件标识,并且ClassLoader只负责 class 文件的加载,至于class文件是否能够运行则由Ex ...
- Windows 修改的hosts记录没有效果
windows修改的hosts记录没有效果,新添加的也没有效果. 检查DNS设置相关的均正常, <Dns client为此计算机解析和缓冲域名系统 (DNS) 名称.> 为此计算机注册并更 ...
- 多维数组sorted函数的用法
对某一个位置排列 l=[[1,5,7,9],[5,10,6,11],[4,2,1,4]] newlist=sorted(l,key=lambda iterm : iterm[0],reverse=Tr ...
- UI设计中颜色的前进色与后退色
暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小. 颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而 ...
- Spring IOC(八)bean 的创建
Spring IOC(八)bean 的创建 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 参考: 每天用心记录一点点.内 ...
- 学习python 多进程和多线程
''' 学习多进程和多线程 ''' import multiprocessing def deadLoop(): while True: pass if __name__ == '__main__': ...
- tomcat运行监控脚本,自动启动
参见:http://www.cnblogs.com/coffee_cn/p/8279165.html monitor.sh #!/bin/sh monitorlog=/usr/local/tomcat ...
- windows下忘记mysql的root密码
1.停止mysql 2.命令行启动mysqlmysqld --defaults-file="c:\mysql\mysql server 5.1\my.ini" --console ...