不知道为什么,在VScode里编辑好的md,粘贴在简书里格式却不对,已经设置成md模式了还是不行。就贴图吧。。也可以看另外一篇文章,那个是好的。 Ace editor 中文文档
# 介绍
> Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。
官网地址:[Ace - The High Performance Code Editor for the Web](https://ace.c9.io/ "Ace - The High Performance Code Editor for the Web")
Github: [GitHub - ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)](https://github.com/ajaxorg/ace/ "GitHub - ajaxorg/ace: Ajax.org Cloud9 Editor")
vue版:[GitHub - chairuosen/vue2-ace-editor](https://github.com/chairuosen/vue2-ace-editor "GitHub - chairuosen/vue2-ace-editor")
# 快速开始
### 简单使用
```html
<div id="editor" style="height: 500px; width: 500px">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
</script>
```
### 设置主题和语言模式
要更改主题,请为编辑器配置要使用的主题路径。主题文件将按需加载:
```javascript
editor.setTheme("ace/theme/twilight");
```
默认情况下,编辑器为纯文本模式。但是,所有其他语言模式都可以作为单独的模块使用。语言模式也将按需加载:
```javascript
editor.session.setMode("ace/mode/javascript");
```
### 编辑器状态
Ace将所有编辑器状态(选择,滚动位置等)保留在`editor.session`中, 这对于制作可切换式编辑器非常有用:
```javascript
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
```javascript
// 将代码模式配置到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()
```
设置和获取内容:`
```javascript
editor.setValue("the new text here"); // 或 session.setValue
editor.getValue(); // 或 session.getValue
```
获取选定的文本:
```javascript
editor.session.getTextRange(editor.getSelectionRange());
```
在光标处插入:
```javascript
editor.insert("Something cool");
```
获取当前光标所在的行和列:
```javascript
editor.selection.getCursor();
```
转到某一行:
```javascript
editor.gotoLine(lineNumber);
```
获取总行数:
```javascript
editor.session.getLength();
```
设置默认标签大小:
```javascript
editor.getSession().setTabSize(4);
```
使用软标签:
```javascript
editor.getSession().setUseSoftTabs(true);
```
设置字体大小:
```javascript
document.getElementById('editor').style.fontSize='12px';
```
切换自动换行:
```javascript
editor.getSession().setUseWrapMode(true);
```
设置行高亮显示:
```javascript
editor.setHighlightActiveLine(false);
```
设置打印边距可见性:
```javascript
editor.setShowPrintMargin(false);
```
设置编辑器为只读:
```javascript
editor.setReadOnly(true); // false为可编辑
```
#### 窗口自适应
编辑器仅在resize事件触发时时调整自身大小。要想以其他方式调整编辑器div的大小,并且需要调整编辑器大小,请使用以下命令:
```javascript
editor.resize()
```
#### 在代码中搜索
主要的ACE编辑器搜索功能在 [_search.js_](https://github.com/ajaxorg/ace/blob/master/lib/ace/search.js).中定义。以下选项可用于搜索参数:
* `needle`: 要查找的字符串或正则表达式
* `backwards`: 是否从当前光标所在的位置向后搜索。默认为“false”
* `wrap`: 当搜索到达结尾时,是否将搜索返回到开头。默认为“false
* `caseSensitive`: 搜索是否应该区分大小写。默认为“false”
* `wholeWord`: 搜索是否只匹配整个单词。默认为“false”
* `range`: 是否要在整个文档中搜索
* `regExp`: 搜索是否为正则表达式。默认为“false”
* `start`: 开始搜索的起始范围或光标位置
* `skipCurrent`: 是否在搜索中包含当前行。默认为“false”
下面是一个如何在编辑器对象上设置搜索的示例:
```javascript
editor.find('needle',{
backwards: false,
wrap: false,
caseSensitive: false,
wholeWord: false,
regExp: false
});
editor.findNext();
editor.findPrevious();
```
这是执行替换的方法:
```javascript
editor.find('foo');
editor.replace('bar');
```
这是全部替换:
```javascript
editor.replaceAll('bar');
```
#### 事件监听
`onchange`:
```javascript
editor.getSession().on('change', callback);
```
`selection`变化:
```javascript
editor.getSession().selection.on('changeSelection', callback);
```
`cursor`变化:
```javascript
editor.getSession().selection.on('changeCursor', callback);
```
#### 添加新的命令和绑定
将指定键绑定并分配给自定义功能:
```javascript
editor.commands.addCommand({
name: 'myCommand',
bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
exec: function(editor) {
//...
}
});
```
### 主要配置项
> 以下是目前所支持的主要选项的列表。除非另有说明,否则选项值皆为布尔值,可以通过editor.setOption来设置。
##### - 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 | - | 选中多处 |
##### - 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 | String | inherit | | 设置字体 |
| maxLines | Number | - | - | 至多行数 |
| minLines | Number | - | - | 至少行数 |
| scrollPastEnd | Boolean|Number | 0 | - | 滚动位置 |
| fixedWidthGutter | Boolean | false | - | 固定行号区域宽度 |
| theme | String | - | - | 主题引用路径,例如"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 | - | - | 使用弹性制表位 |
网友评论