1、介绍
Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。
2、在项目中配置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()
3、API选项
以下是目前所有支持的选项的列表。除非另有说明，否则选项值皆为布尔值，可以通过editor.setOption来设置。
3.1 editor选项
| 选项名 |
值类型 |
默认值 |
可选值 |
备注 |
| selectionStyle |
String |
text |
line|text |
选中样式 |
| highlightActiveLine |
Boolean |
true |
- |
高亮当前行 |
| highlightSelectedWord |
Boolean |
true |
- |
高亮选中文本 |
| readOnly |
Boolean |
false |
- |
是否只读 |
| cursorStyle |
String |
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 |
- |
选中多处 |
3.2 renderer选项
| 选项名 |
值类型 |
默认值 |
可选值 |
备注 |
| hScrollBarAlwaysVisible |
Boolean |
false |
- |
纵向滚动条始终可见 |
| vScrollBarAlwaysVisible |
Boolean |
false |
- |
横向滚动条始终可见 |
| highlightGutterLine |
Boolean |
true |
- |
高亮边线 |
| animatedScroll |
Boolean |
false |
- |
滚动动画 |
| showInvisibles |
Boolean |
false |
- |
显示不可见字符 |
| showPrintMargin |
Boolean |
false |
- |
显示打印边距 |
| 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 |
String |
inherit |
|
设置字体 |
| maxLines |
Number |
- |
- |
至多行数 |
| minLines |
Number |
- |
- |
至少行数 |
| scrollPastEnd |
Boolean|Number |
0 |
- |
滚动位置 |
| fixedWidthGutter |
Boolean |
false |
- |
固定行号区域宽度 |
| theme |
String |
- |
- |
主题引用路径，例如"ace/theme/textmate" |
3.3 mouseHandler选项
| 选项名 |
值类型 |
默认值 |
可选值 |
备注 |
| scrollSpeed |
Number |
- |
- |
滚动速度 |
| dragDelay |
Number |
- |
- |
拖拽延时 |
| dragEnabled |
Boolean |
true |
- |
是否启用拖动 |
| focusTimout |
Number |
- |
- |
聚焦超时 |
| tooltipFollowsMouse |
Boolean |
false |
- |
鼠标提示 |
3.4 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" |
3.5 扩展选项
| 选项名 |
值类型 |
默认值 |
可选值 |
备注 |
| enableBasicAutocompletion |
Boolean |
- |
- |
启用基本自动完成 |
| enableLiveAutocompletion |
Boolean |
- |
- |
启用实时自动完成 |
| enableSnippets |
Boolean |
- |
- |
启用代码段 |
| enableEmmet |
Boolean |
- |
- |
启用Emmet |
| useElasticTabstops |
Boolean |
- |
- |
使用弹性制表位 |
转载于：https://www.jianshu.com/p/fb49c843a679
