ace how to guide

Configuring the editor

there are several ways to pass configuration to Ace

有几种方法可以将配置传递给ace

// pass options to ace.edit

ace.edit(element, {

mode: "ace/mode/javascript",

selectionStyle: "text"

})

// use setOptions method to set several options at once

editor.setOptions({

autoScrollEditorIntoView: true,

copyWithEmptySelection: true,

});

// use setOptions method

editor.setOption("mergeUndoDeltas", "always");

 

// some options are also available as methods e.g.

editor.setTheme(...)

 

// to get the value of the option use

editor.getOption("optionName");

 

See Configuring-Ace wiki page for a more detailed list of options.

请参考 configuring-ace wike 页面 获取更详细的列表选项        https://github.com/ajaxorg/ace/wiki/Configuring-Ace

 

Changing the size of the editor

改变编辑器的尺寸。

Ace only checks for changes of the size of it's container when window is resized. If you resize the editor div in another manner, and need Ace to resize, use the following:

当窗口调整大小时， ace只检查容器的大小变化。如果以另一种方式调整编辑器div的大小，并且需要ace调整大小， 请使用以下方法：

editor.resize()

 

 

if you want editor to change it's size based on contents, use maxLines option as shown in https://ace.c9.io/demo/autoresize.html

如果你希望编辑器根据内容更改其大小，使用maxLines选项如 --

Setting Themes

Themes are loaded on demand; all you have to do is pass the string name:

按需加载主题，你所要做的就是传递字符串名称。

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

> See all themes      查看所有的主题：   https://github.com/ajaxorg/ace/tree/master/lib/ace/theme

 

 

Setting the Programming Language Mode 设置编程语言模式

By default, the editor supports plain text mode. All other language modes are available as separate modules, loaded on demand like this:

默认情况下，编辑器支持纯文本模式，所有其他语言模式可作为单独的模式，按要求加载如下：

editor.session.setMode("ace/mode/javascript");

 

 

One Editor, Multiple Sessions  一个编辑器，多个回话

Ace keeps everything about the state of the editor (selection, scroll position, etc.) in  editor.session. This means you can grab the session, store it in a var, and set the editor to another session (e.g. a tabbed editor).

ace将编辑器的所有状态保持在 editor.session （选中区，滚动位置等）。这意味着你可以抓取 session， 将其存储在 var中，并将编辑器设置为另一个session（例如选项卡编辑器）

 

You might accomplish this like so:

你可以做到这一点：

var EditSession = require("ace/edit_session").EditSession;

var js = new EditSession("some js code");

var css = new EditSession(["some", "css", "code here"]);

// and then to load document into editor, just call

editor.setSession(js);

 

Common Operations

Set and get content:

设置和获取内容

editor.setValue("the new text here");

editor.session.setValue("the new text here"); // set value and reset undo history

editor.getValue(); // or session.getValue

 

Get selected text:

获取选中的文本

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

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

 

Insert at cursor, emulating user input:

插入光标，模拟用户输入

editor.insert("Something cool");

 

Replace text in range:

在范围内替换文本

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

 

Get the current cursor line and column:

获取当前光标的行和列

editor.selection.getCursor();

 

Go to a line:

到达某一行

editor.gotoLine(lineNumber);

 

Get total number of lines:

获取总行数

editor.session.getLength();

 

Set the default tab size:

设置默认的tab大小

editor.session.setTabSize(4);

 

Use soft tabs:

使用软tabs

editor.session.setUseSoftTabs(true);

Set the font size:

设置字体大小

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

 

Toggle word wrapping:

切换字包装

editor.session.setUseWrapMode(true);

Set line highlighting:

设置行高亮

editor.setHighlightActiveLine(false);

 

Set the print margin visibility:

设置打印边距可见度

editor.setShowPrintMargin(false);

 

Set the editor to read-only:

设置编辑器只读

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

 

 

Using undo manager

使用撤销管理器

To group undo delta of the next edit with the previous one set `mergeUndoDeltas` to true

将下一个编辑的撤销增量分组，通过在前一个设置 ‘mergeUndoDeltas’为true

editor.session.mergeUndoDeltas = true;

editor.session.insert({row: 0, column:0}, Date()+"");

 

To start new undo group use `markUndoGroup` method

使用 markUndoGroup方法启动新撤销组

editor.insertSnippet("a$0b");

editor.session.markUndoGroup();

editor.insertSnippet("x$0y");

 

To implement undo/redo buttons see https://ace.c9.io/demo/toolbar.html

实现 undo/redo  按钮查看

 

 

Searching 查找

editor.find('needle',{

backwards: false,

wrap: false,

caseSensitive: false,

wholeWord: false,

regExp: false

});

editor.findNext();

editor.findPrevious();

 

 

The following options are available to you for your search parameters:

下列选项可供你搜索参数使用：

• needle: The string or regular expression you're looking for
  • 　　你正在寻找的字符串或者正则表达式。
• backwards: Whether to search backwards from where cursor currently is. Defaults to false.
  • 　　是否从当前光标位置向后搜索。默认值 false
• wrap: Whether to wrap the search back to the beginning when it hits the end. Defaults to false.
  • 　　是否在结束搜索时将搜索返回到开始。 默认值false
• caseSensitive: Whether the search ought to be case-sensitive. Defaults to false.
  • 　　搜索是否区分大小写。 默认值false
• wholeWord: Whether the search matches only on whole words. Defaults to false.
  • 　　搜索是否只匹配整个单词。
• range: The Range to search within. Set this to null for the whole document
  • 　　搜索范围，设置为null时搜索整个文档。
• regExp: Whether the search is a regular expression or not. Defaults to false.
  • 　　搜索是否为正则表达式。 默认值是false
• start: The starting Range or cursor position to begin the search
  • 　　开始范围或光标位置开始搜索。
• skipCurrent: Whether or not to include the current line in the search. Default to false.
  • 　　是否在搜索中包含当前行。默认值 false
• preventScroll: Whether or not to move the cursor to the next match. Default to false.
  • 　　是否将光标移到下个匹配项。默认值false

Here's how you can perform a replace:

 

下面是如何进行替换

editor.find('foo');

editor.replace('bar');

 

And here's a replace all:

全部替换

editor.replaceAll('bar');

 

(editor.replaceAll uses the needle set earlier by editor.find('needle', ...)

 

Listening to Events 监听事件

To listen for an onchange: 监听change事件

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

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

});

 

To listen for an selection change:   监听选中区change事件

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

});

 

To listen for a cursor change:  监听 光标change事件

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

});

 

Adding New Commands and Keybindings  添加新的命令和键绑定

 

To assign key bindings to a custom function:

将键绑定分配给自定义函数：

editor.commands.addCommand({

name: 'myCommand',

bindKey: {win: 'Ctrl-M', mac: 'Command-M'},

exec: function(editor) {

//...

},

readOnly: true // false if this command should not apply in readOnly mode

});

 

Configure dynamic loading of modes and themes  配置模式和主题的动态加载

By default ace detcts the url for dynamic loading by finding the script node for ace.js. This doesn't work if ace.js is not loaded with a separate script tag, and in this case it is required to set url explicitely

默认情况下，ace通过查找ace.js的脚本节点来检测动态加载的url。如果 ace.js不是通过单独的script标签加载就不会有用。在这种情况下，需要明确地设置url。

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

 

Path for one module alone can be configured with:

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

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

 

When using ace with webpack, it is possible to configure paths for all submodules using

当通过webpack使用ace时，可以配置paths给所有子模块使用

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

which depends on file-loader