ace

github: https://github.com/ajaxorg/ace
star: 24.9k
ace-builds: Weekly Downloads 536,536

Ace是用JavaScript编写的代码编辑器。

此存储库仅生成了文件。如果你想在ace上工作,请转到https://github.com/ajaxorg/ace

在这里,您可以找到预先构建的文件,以便于嵌入。它包含4个版本

src 但不缩小

src-min 用uglify.js连接和缩小

src-noconflict 使用ace.require而不是require

src-min-noconflict 连接,缩小与uglify.js,并使用ace.require而不是require

有关将ace嵌入网页的简单方法,请参阅编辑器。html或其他简单示例列表要查看实际操作中的ace,

注:新网站位于http://ace.c9.io包含以下所有信息以及嵌入指南和开始使用Ace所需的所有其他资源。

Ace是一个用JavaScript编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器,以匹配和扩展现有本地编辑器(如TextMate、Vim或Eclipse)的特性、可用性和性能。它可以轻松嵌入任何网页或JavaScript应用程序。Ace是Cloud9 IDE的主要编辑器,也是Mozilla Skywriter(Bespin)项目的后续版本。

特征

120多种语言的语法高亮显示(可以导入TextMate/Sublime/.tmlanguage文件)

超过20个主题(可以导入TextMate/Sublime/.tmtheme文件)

自动缩进和升级

可选命令行

处理大型文档(最后检查时,上限为4000000行)

完全可定制的键绑定,包括vim和Emacs模式

搜索并替换为正则表达式

突出显示匹配的括号

在软选项卡和真实选项卡之间切换

显示隐藏字符

使用鼠标拖放文本

断行

代码折叠

多个光标和选择

实时语法检查器(当前为JavaScript/CoffeeScript/CSS/XQuery)

剪切、复制和粘贴功能

在线demo https://ace.c9.io/build/kitchen-sink.html

嵌入Ace

Ace可以轻松嵌入任何现有网页。您可以使用ace的一个预打包版本(只需将src*子目录之一复制到您的项目中),也可以使用requireJS将lib/ace的内容作为ace加载

要更改主题,只需包含主题的JavaScript文件

并配置编辑器以使用主题:

默认情况下,编辑器仅支持纯文本模式;许多其他语言作为单独的模块提供。包含模式的JavaScript文件后:

文档

其他使用信息,包括侦听和扩展语法高亮显示的事件,可以在Ace主网站上找到。https://ace.c9.io/

您还可以在以下位置找到API文档:http://ace.c9.io/#nav=api.

您通常不需要构建ACE。ace构建存储库ace-builds repository e努力维护最新的构建,您只需将src*子目录中的一个子目录复制到您的项目中。

Ace可以轻松嵌入到网页中。从ace-builds 存储库获取ace的预构建版本,并使用以下代码:

现在,请查看《操作指南》https://ace.c9.io/#nav=howto,了解有关常见操作的说明,例如设置不同的语言模式或从编辑器获取内容。
从本地URL加载Ace

如果要在本地克隆和托管Ace,可以使用预打包版本之一。只需将src*子目录之一复制到项目中的某个位置,或使用RequireJS将lib/ace文件夹的内容加载为ace:

配置编辑器
有几种方法可以将配置传递给Ace

https://github.com/ajaxorg/ace/wiki/Configuring-Ace

更改编辑器的大小
Ace仅在调整窗口大小时检查其容器大小的更改。如果以另一种方式调整编辑器div的大小,并且需要Ace来调整大小,请使用以下命令:

如果希望编辑器根据内容更改其大小,请使用maxLines选项,如中所示https://ace.c9.io/demo/autoresize.html

获取选定文本:

在光标处插入,模拟用户输入:

替换范围内的文本:
获取当前光标行和列:

转到一行:

获取总行数:

设置默认选项卡大小:

使用软标签:

设置字体大小:

切换换行:

设置线条突出显示:

设置打印边距可见性:

将编辑器设置为只读:

使用撤消管理器

将下一次编辑的撤消增量与前一次编辑设置为“mergeUndoDeltas”的撤消增量分组为true

要启动新的撤消组,请使用markUndoGroup方法
在协作编辑器中禁用撤消编辑

以下选项可用于搜索参数:

needle: The string or regular expression you're looking for
backwards: Whether to search backwards from where cursor currently is. Defaults to false.
wrap: Whether to wrap the search back to the beginning when it hits the end. Defaults to false.
caseSensitive: Whether the search ought to be case-sensitive. Defaults to 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
regExp: Whether the search is a regular expression or not. Defaults to 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.
preventScroll: Whether or not to move the cursor to the next match. Default to false.
needle:您要查找的字符串或正则表达式

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

wrap:当搜索到达结束时,是否将搜索返回到开始。默认为false。

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

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

range:要搜索的范围。将整个文档设置为空

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

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

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

preventScroll:是否将光标移动到下一个匹配项。默认为false。

添加新命令和键绑定

配置模式和主题的动态加载

默认情况下,ace通过查找ace.js的脚本节点来检测动态加载的url。如果A,这不起作用。js没有加载单独的脚本标记,在这种情况下,需要显式设置url

为Ace创建语法高亮显示
为Ace创建新的语法高亮显示非常简单。您需要定义两段代码:一个新模式和一组新的突出显示规则。

我们建议在定义Ace Mode Creator。https://ace.c9.io/tool/mode_creator.html 这允许您检查代码的标记,并提供实际语法高亮显示的实时预览。

定义模式

每种语言都需要一种模式。模式包含指向语言语法突出显示规则、缩进规则和代码折叠规则的路径。如果不定义模式,Ace将无法了解您语言的细节。

下面是我们将用于创建新模式的起始模板:

这是怎么回事?首先,您要定义TextMode的路径(稍后将详细介绍)。然后将模式指向突出显示规则的定义以及代码折叠规则。最后,您将设置所有内容以查找这些规则,并导出Mode以便可以使用它。就是这样!

关于TextMode,您会注意到它只使用一次:oop。inherits(Mode,TextMode);。如果您的新语言依赖于另一种语言的规则,您可以选择继承相同的规则,同时根据您的语言自身的要求对其进行扩展。例如,PHP继承自HTML,因为它可以直接嵌入.HTML页面中。您可以从TextMode或任何其他现有模式继承,如果它已经与您的语言相关。

定义语法突出显示规则

Ace高亮可以被视为状态机。正则表达式定义当前状态的标记,以及到另一状态的转换。让我们定义上面的模式使用的mynew_highlight_rules.js。

所有语法高亮显示都是这样开始的:

定义令牌

定义正则表达式

使用TMLanguage Tool

有一个工具可以将现有的tmlanguage文件转换为Javascript,供Ace使用。以下是您需要开始的内容:

在lib/ace/mode中创建并放置了两个文件:一个用于语言模式,另一个用于突出显示规则集。您仍然需要将代码添加到ace/ext/modelist中。js,并添加用于测试的示例文件。

关于准确性的注释

扩展高亮

下面是一个ERD图,描述了有关Ace内部工作原理的一些基本原理:

注:新网站位于http://ace.c9.io包含以下所有信息以及嵌入指南和开始使用Ace所需的所有其他资源。

Ace是一个用JavaScript编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器,以匹配和扩展现有本地编辑器(如TextMate、Vim或Eclipse)的特性、可用性和性能。它可以轻松嵌入任何网页或JavaScript应用程序。Ace是Cloud9 IDE的主要编辑器,也是Mozilla Skywriter(Bespin)项目的后续版本。

posted @ 2022-10-11 16:25  Running00  阅读(269)  评论(0编辑  收藏  举报