ace.js 打造一款属于你的 Web 编辑器,入门文档。

ace.js

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

特点

  • 超过 120 种语言的语法突出显示(可导入 TextMate / Sublime / .tmlanguage 文件)
  • 超过 20 个主题(可导入 TextMate / Sublime / .tmtheme 文件)
  • 自动缩进和突出
  • 可选的命令行
  • 处理大量文件(最后检查,4,000,000 行是上限)
  • 完全可定制的键绑定,包括 VIM 和 Emacs 模式
  • 搜索并替换正则表达式
  • 突出显示匹配的括号
  • 在软标签和真实标签之间切换
  • 显示隐藏的字符
  • 使用鼠标拖放文本
  • 换行
  • 代码折叠
  • 多个游标和选择
  • 实时语法检查器(目前是 JavaScript / CoffeeScript / CSS / XQuery)
  • 剪切,复制和粘贴功能

ace.js 编译文件下载

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

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

ace.js快速入门

初始化

  • 定义 HTML
  • 编写 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;
}

主题

  • 加入你的主题 JS
  • 写入调用
<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();

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

  • needle:您要查找的字符串或正则表达式
  • backwards:是否从光标当前位置向后搜索。默认为false
  • wrap:搜索到末尾时是否将搜索回头。默认为false
  • caseSensitive:搜索是否应该区分大小写。默认为false
  • wholeWord:搜索是否仅匹配整个单词。默认为false
  • range:该 [范围] 内搜索。将 null 整个文档设置为
  • regExp:搜索是否为正则表达式。默认为false
  • start:开始搜索的起始 [范围] 或光标位置
  • skipCurrent:是否在搜索中包括当前行。默认为false
  • preventScroll:是否将光标移动到下一个匹配项。默认为false

这是执行替换的方法:

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在线演示实例

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

相关帖子

黑白课堂

如果你在.env文件下配置了变量参数,在路由缓存下会无效

| 最后更新 2020-12-11 03:05:43
1189 0
黑白课堂

laravel之Artisan命令操作,以及自己编写Artisan Console命令

| 最后更新 2021-01-13 14:24:58
802 0
黑白课堂

JWT(JSON Web Token)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。 一个JWT实际上就是一个字符串,它由三部分组成,头部、载荷与签名

| 最后更新 2021-01-13 14:25:29
1083 0
黑白课堂

扩展一个指令在blade模板中使用。

| 最后更新 2020-12-11 03:04:51
745 0
黑白课堂

所有Laravel应用启动的中心,所有Laravel的核心服务都是通过服务提供者启动,服务提供者是应用配置的中心. >这里需要了解下IOC(控制反转)也叫依赖注入

| 最后更新 2021-01-11 03:14:14
616 0
黑白课堂

控制对资源的访问权限,这个权限不同于RBAC(角色的权限访问控制),比如,只能操作自己的信息,可以说是拟补RBAC的更加细腻的权限。

| 最后更新 2021-01-13 14:24:00
630 0

公告通知

祝大家新春快乐
                                    ——黑白课堂

黑白课堂

黑白课堂 · 超级学霸

专业PHP开发

年度VIP 站长创业者玉树凌风每天醒来0收入
查看更多

最新视频课程

钻级赞助商