«

Ace 中文文档

时间：2021-12-21 22:02     作者：独元殇     分类： 前端技术

最近想用 Ace 做一个东西，于是找到了这个文档，发到自己的网站上收藏使用。原地址：https://www.jianshu.com/p/8a4a5e273538

介绍

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

快速开始

简单使用

<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>

设置主题和语言模式

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

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.中定义。以下选项可用于搜索参数：

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

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 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 - - 使用弹性制表位

发表于黑白课堂https://www.heibaiketang.com/blog/show/95.html
由于百度全面下架了我的收录，不知道为何，可能没给钱，所以导致这篇文章没有排名

ace.js

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

特点

ace.js 编译文件下载

默认情况下，它是分开的2个库，经过查找，找了，不需要自己打包编译出来。
https://github.com/ajaxorg/ace-builds/
下载即可，有多种模式。

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

ace.js快速入门

初始化

<div id="editor">some text</div>
<script src="src/ace.js" type="text/JavaScript" charset="utf-8"></script>
<script>
    var editor = ace.edit ("editor");// 这里不需要加 #
</script>

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

#editor {

    width: 500px;
    height: 400px;
}

主题

<script src="src/theme-twilight.js" type="text/JavaScript" charset="utf-8"></script>
<script>
   editor.setTheme ("ace/theme/twilight");
</script>

输入模式

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

<script src="src/mode-javascript.js" type="text/JavaScript" charset="utf-8"></script>

<script>
var JavaScriptMode = ace.require ("ace/mode/JavaScript").Mode;
editor.session.setMode (new JavaScriptMode ());
</script>

销毁

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();

您可以使用以下选项作为搜索参数：

这是执行替换的方法：

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

https://github.com/ajaxorg/ace/wiki

ace.js在线演示实例

标签: 转载

推荐阅读：