发表于黑白课堂

ace.js

官方的github https://github.com/ajaxorg/ace

ace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器，该编辑器匹配并扩展现有本机编辑器(如 TextMate，VIM 或 Eclipse)的功能，可用性和性能。它可以轻松嵌入任何网页或 JavaScript 应用程序中。Ace 是 Cloud9 IDE 的主要编辑者，也是 Mozilla Skywriter(Bespin)项目的继承者。

特点

超过 120 种语言的语法突出显示(可导入 TextMate / Sublime / .tmlanguage 文件)

超过 20 个主题(可导入 TextMate / Sublime / .tmtheme 文件)

自动缩进和突出

可选的命令行

处理大量文件(最后检查，4,000,000 行是上限)

完全可定制的键绑定，包括 VIM 和 Emacs 模式

搜索并替换正则表达式

突出显示匹配的括号

在软标签和真实标签之间切换

显示隐藏的字符

使用鼠标拖放文本

换行

代码折叠

多个游标和选择

实时语法检查器(目前是 JavaScript / CoffeeScript / CSS / XQuery)

剪切，复制和粘贴功能

ace.js 编译文件下载

默认情况下，它是分开的2个库，经过查找，找了，不需要自己打包编译出来。

https://github.com/ajaxorg/ace-builds/

下载即可，有多种模式。

file

git clone https://github.com/ajaxorg/ace-builds.git

ace.js快速入门

初始化

定义 HTML

编写 JS

var editor = ace.edit ("editor");// 这里不需要加 #

这样是不能显示的，所有需要加个高度和宽度，例如

#editor {

width: 500px;

height: 400px;

}

主题

加入你的主题 JS

写入调用

editor.setTheme ("ace/theme/twilight");

输入模式

默认情况下，输入的是文本编辑器，如果你想要加入 JavaScript 编辑器，需要加入文件，并且设置模式

var JavaScriptMode = ace.require ("ace/mode/JavaScript").Mode;

editor.session.setMode (new JavaScriptMode ());

销毁

editor.destroy ();

editor.container.remove ();

自动提示语法

editor.setOptions ({

enableBasicAutocompletion: true,//

enableSnippets: true,//

enableLiveAutocompletion: true,// 补全

});

监听内容实时输出

editor.getSession().on ('change', function (e) {

});

获得输入内容 editor.getValue ()

设置输入内容 editor.setValue (editorValue);

移动光标 editor.moveCursorTo (0, 0);// 移动光标至第 0 行，第 0 列

编辑内容搜索 editor.execCommand ('find');// 与 ctrl+f 功能一致

ace.js配置

创建并初始化 ace.edit(element, options);

// pass options to ace.edit

ace.edit("元素ID", {

mode: "ace/mode/javascript",

selectionStyle: "text"

})

方法设置参数多个 editor.setOptions(options)

var editor=ace.edit("元素ID");

editor.setOptions({

enableBasicAutocompletion: true,

enableSnippets: true,

enableLiveAutocompletion: true,//只能补全

});

方法设置参数单个 editor.setOption(options)

取得单个配置 editor.getOption

editor.getOption("optionName");

设置主题 editor.setThemee("主题")

editor.setTheme("ace/theme/monokai");//monokai

设置编辑器语言模式getSession().setMode(mode)

editor.getSession().setMode("ace/mode/html");//语言

支持以下

|-- ambiance.css

|-- ambiance.js

|-- chaos.css

|-- chaos.js

|-- chrome.css

|-- chrome.js

|-- clouds.css

|-- clouds.js

|-- clouds_midnight.css

|-- clouds_midnight.js

|-- cobalt.css

|-- cobalt.js

|-- crimson_editor.css

|-- crimson_editor.js

|-- dawn.css

|-- dawn.js

|-- dracula.css

|-- dracula.js

|-- dreamweaver.css

|-- dreamweaver.js

|-- eclipse.css

|-- eclipse.js

|-- github.css

|-- github.js

|-- gob.css

|-- gob.js

|-- gruvbox.css

|-- gruvbox.js

|-- idle_fingers.css

|-- idle_fingers.js

|-- iplastic.css

|-- iplastic.js

|-- katzenmilch.css

|-- katzenmilch.js

|-- kr_theme.css

|-- kr_theme.js

|-- kuroir.css

|-- kuroir.js

|-- merbivore.css

|-- merbivore.js

|-- merbivore_soft.css

|-- merbivore_soft.js

|-- mono_industrial.css

|-- mono_industrial.js

|-- monokai.css

|-- monokai.js

|-- nord_dark.css

|-- nord_dark.js

|-- pastel_on_dark.css

|-- pastel_on_dark.js

|-- solarized_dark.css

|-- solarized_dark.js

|-- solarized_light.css

|-- solarized_light.js

|-- sqlserver.css

|-- sqlserver.js

|-- terminal.css

|-- terminal.js

|-- textmate.css

|-- textmate.js

|-- tomorrow.css

|-- tomorrow.js

|-- tomorrow_night.css

|-- tomorrow_night.js

|-- tomorrow_night_blue.css

|-- tomorrow_night_blue.js

|-- tomorrow_night_bright.css

|-- tomorrow_night_bright.js

|-- tomorrow_night_eighties.css

|-- tomorrow_night_eighties.js

|-- twilight.css

|-- twilight.js

|-- vibrant_ink.css

|-- vibrant_ink.js

|-- xcode.css

`-- xcode.js

取消语言模式的语法检查 editor.session.setUseWorker(false);

editor.session.setUseWorker(false);

或

editor.getSession().setUseWorker(false);

更改编辑器的大小

editor.resize()

获取选定的文本：

editor.getSelectedText(); // or for a specific range

editor.session.getTextRange(editor.getSelectionRange());

光标处输入信息

editor.insert("Something cool");

替换范围内的文本

editor.session.replace(new ace.Range(0, 0, 1, 1), "new text");

获取当前光标所在的行和列：

editor.selection.getCursor();

转到一行：

editor.gotoLine(lineNumber);

获取总行数：

editor.session.getLength();

设置默认TAB大小：

editor.session.setTabSize(4);

设置字体大小：

document.getElementById('editor').style.fontSize='12px';

切换自动换行：

editor.session.setUseWrapMode(true);

设置行高亮显示：

editor.setHighlightActiveLine(false);

设置打印边距可见性：

editor.setShowPrintMargin(false);

将编辑器设置为只读：

editor.setReadOnly(true); // false to make it editable

查找

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：该[范围]内搜索。将null整个文档设置为

regExp：搜索是否为正则表达式。默认为false。

start：开始搜索的起始[范围]或光标位置

skipCurrent：是否在搜索中包括当前行。默认为false。

preventScroll：是否将光标移动到下一个匹配项。默认为false。

这是执行替换的方法：

editor.find('foo');

editor.replace('bar');

这是全部替换：

editor.replaceAll('bar');

(editor.replaceAll使用较早设置的针头editor.find('needle', ...)

ace.js 监听事件

onchange 内容变化监听

editor.session.on('change', function(delta) {

// delta.start, delta.end, delta.lines, delta.action

});

监听 selection

editor.session.selection.on('changeSelection', function(e) {

});

监听光标：

editor.session.selection.on('changeCursor', function(e) {

});

添加新命令和快捷键

editor.commands.addCommand({

name: 'myCommand',//命令名称

bindKey: {win: 'Ctrl-M', mac: 'Command-M'},//快捷键

exec: function(editor) {

//执行的代码

},

readOnly: true // false 只读模式

});

配置模式和主题的动态加载

ace.config.set("basePath", "https://url.to.a/folder/that/contains-ace-modes");

一个模块的路径可以单独配置：

ace.config.setModuleUrl("ace/theme/textmate", "url for textmate.js");

将ace与webpack一起使用时，可以使用以下命令配置所有子模块的路径

require("ace-builds/webpack-resolver");

ace 英文wiki

ace.js在线演示实例