ace.js ajax 跳转,Ace editor 中文文档

Ace editor 中文文档

https://github.com/ajaxorg/ace-builds/releases/tag/v1.4.12

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中

官网地址：

Ace – The High Performance Code Editor for the Web

Github:

GitHub – ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)

vue版：

GitHub – chairuosen/vue2-ace-editor

快速开始

简单使用

some text

var editor = ace.edit("editor");

设置主题和语言模式

要更改主题，请为编辑器配置要使用的主题路径。主题文件将按需加载：

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

默认情况下，编辑器为纯文本模式。但是，所有其他语言模式都可以作为单独的模块使用。语言模式也将按需加载：

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

编辑器状态

Ace将所有编辑器状态(选择，滚动位置等)保留在editor.session中, 这对于制作可切换式编辑器非常有用：

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

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

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

// 要将文档加载到编辑器中，只需这样调用

editor.setSession(js)

在项目中配置Ace

// 将代码模式配置到ace选项

ace.edit(element, {

mode: "ace/mode/javascript",

selectionStyle: "text"

})

// 使用setOptions方法一次设置多个选项

editor.setOptions({

autoScrollEditorIntoView: true,

copyWithEmptySelection: true,

});

// 单独设置setOptions方法

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

// 一些选项也直接设置，例如：

editor.setTheme(...)

// 获取选项设置值

editor.getOption("optionName");

// 核心Ace组件包括(editor, session, renderer, mouseHandler)

setOption(optionName, optionValue)

setOptions({

optionName : optionValue

})

getOption(optionName)

getOptions()

设置和获取内容：

editor.setValue("the new text here"); // 或 session.setValue

editor.getValue(); // 或 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);

设置字体大小：

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

切换自动换行：

editor.getSession().setUseWrapMode(true);

设置行高亮显示：

editor.setHighlightActiveLine(false);

设置打印边距可见性：

editor.setShowPrintMargin(false);

设置编辑器为只读：

editor.setReadOnly(true); // false为可编辑

窗口自适应

编辑器仅在resize事件触发时时调整自身大小。要想以其他方式调整编辑器div的大小，并且需要调整编辑器大小，请使用以下命令：

editor.resize()

在代码中搜索

主要的ACE编辑器搜索功能在 search.js.中定义。以下选项可用于搜索参数：

needle: 要查找的字符串或正则表达式

backwards: 是否从当前光标所在的位置向后搜索。默认为“false”

wrap: 当搜索到达结尾时，是否将搜索返回到开头。默认为“false

caseSensitive: 搜索是否应该区分大小写。默认为“false”

wholeWord: 搜索是否只匹配整个单词。默认为“false”

range: 搜索匹配范围，要搜索整个文档则设置为空

regExp: 搜索是否为正则表达式。默认为“false”

start: 开始搜索的起始范围或光标位置

skipCurrent: 是否在搜索中包含当前行。默认为“false”

下面是一个如何在编辑器对象上设置搜索的示例：

editor.find('needle',{

backwards: false,

wrap: false,

caseSensitive: false,

wholeWord: false,

regExp: false

});

editor.findNext();

editor.findPrevious();

这是执行替换的方法：

editor.find('foo');

editor.replace('bar');

这是全部替换：

editor.replaceAll('bar');

editor.replaceAll使用前需要先调用editor.find(‘needle’, …)

事件监听

onchange:

editor.getSession().on('change', callback);

selection变化:

editor.getSession().selection.on('changeSelection', callback);

cursor变化:

editor.getSession().selection.on('changeCursor', callback);

添加新的命令和绑定

将指定键绑定并分配给自定义功能：

editor.commands.addCommand({

name: 'myCommand',

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

exec: function(editor) {

//...

}

});

主要配置项

以下是目前所支持的主要选项的列表。除非另有说明，否则选项值皆为布尔值，可以通过editor.setOption来设置

– editor选项

选项名

值类型

默认值

可选值

备注

selectionStyle

text

line|text

选中样式

highlightActiveLine

Boolean

true

–

高亮当前行

highlightSelectedWord

Boolean

true

–

高亮选中文本

readOnly

Boolean

false

–

是否只读

cursorStyle

ace

ace|slim|smooth|wide

光标样式

mergeUndoDeltas

String|Boolean

false

always

合并撤销

behavioursEnabled

Boolean

true

–

启用行为

wrapBehavioursEnabled

Boolean

true

–

启用换行

autoScrollEditorIntoView

Boolean

false

–

启用滚动

copyWithEmptySelection

Boolean

true

–

复制空格

useSoftTabs

Boolean

false

–

使用软标签

navigateWithinSoftTabs

Boolean

false

–

软标签跳转

enableMultiselect

Boolean

false

–

选中多处

– renderer选项

选项名

值类型

默认值

可选值

备注

hScrollBarAlwaysVisible

Boolean

false

–

纵向滚动条始终可见

vScrollBarAlwaysVisible

Boolean

false

–

横向滚动条始终可见

highlightGutterLine

Boolean

true

–

高亮边线

animatedScroll

Boolean

false

–

滚动动画

showInvisibles

Boolean

false

–

显示不可见字符

showPrintMargin

Boolean

true

–

显示打印边距

printMarginColumn

Number

80

–

设置页边距

printMargin

Boolean|Number

false

–

显示并设置页边距

fadeFoldWidgets

Boolean

false

–

淡入折叠部件

showFoldWidgets

Boolean

true

–

显示折叠部件

showLineNumbers

Boolean

true

–

显示行号

showGutter

Boolean

true

–

显示行号区域

displayIndentGuides

Boolean

true

–

显示参考线

fontSize

Number|String

inherit

–

设置字号

fontFamily

inherit

设置字体

maxLines

Number

–

–

至多行数

minLines

Number

–

–

至少行数

scrollPastEnd

Boolean|Number

0

–

滚动位置

fixedWidthGutter

Boolean

false

–

固定行号区域宽度

theme

–

–

主题引用路径，例如”ace/theme/textmate”

– mouseHandler选项

选项名

值类型

默认值

可选值

备注

scrollSpeed

Number

–

–

滚动速度

dragDelay

Number

–

–

拖拽延时

dragEnabled

Boolean

true

–

是否启用拖动

focusTimout

Number

–

–

聚焦超时

tooltipFollowsMouse

Boolean

false

–

鼠标提示

– session选项

选项名

值类型

默认值

可选值

备注

firstLineNumber

Number

1

–

起始行号

overwrite

Boolean

–

–

重做

newLineMode

String

auto

auto|unix|windows

新开行模式

useWorker

Boolean

–

–

使用辅助对象

useSoftTabs

Boolean

–

–

使用软标签

tabSize

Number

–

–

标签大小

wrap

Boolean

–

–

换行

foldStyle

String

–

markbegin|markbeginend|manual

折叠样式

mode

String

–

–

代码匹配模式，例如“ace/mode/text”

– 扩展选项

选项名

值类型

默认值

可选值

备注

enableBasicAutocompletion

Boolean

–

–

启用基本自动完成

enableLiveAutocompletion

Boolean

–

–

启用实时自动完成

enableSnippets

Boolean

–

–

启用代码段

enableEmmet

Boolean

–

–

启用Emmet

useElasticTabstops

Boolean

–

–

使用弹性制表位

程序员灯塔

转载请注明原文链接：Ace editor 中文文档