自学编程网ace在线代码编辑器
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/
下载即可，有多种模式。
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>
这样是不能显示的，所有需要加个高度和宽度，例如
<br/>
#editor { width: 500px;
height: 400px;}
主题
加入你的主题 JS
写入调用
<br/>
<script src="src/theme-twilight.js" type="text/JavaScript" charset="utf-8"></script><script>
editor.setTheme ("ace/theme/twilight");</script>
输入模式
默认情况下，输入的是文本编辑器，如果你想要加入 JavaScript 编辑器，需要加入文件，并且设置模式
<br/>
<script src="src/mode-javascript.js" type="text/JavaScript" charset="utf-8"></script>
<br/>
<script>var JavaScriptMode = ace.require ("ace/mode/JavaScript").Mode;editor.session.setMode (new JavaScriptMode ());</script>销毁
<br/>
editor.destroy ();editor.container.remove ();
自动提示语法
<br/>
editor.setOptions ({
enableBasicAutocompletion: true,//
enableSnippets: true,//
enableLiveAutocompletion: true,// 补全});监听内容实时输出
<br/>
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);
<br/>
// pass options to ace.editace.edit("元素ID", {
mode: "ace/mode/javascript",
selectionStyle: "text"})方法设置参数多个 editor.setOptions(options)
<br/>
var editor=ace.edit("元素ID");editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,//只能补全
});方法设置参数单个 editor.setOption(options)
取得单个配置 editor.getOption
<br/>
editor.getOption("optionName");设置主题 editor.setThemee("主题")
<br/>
editor.setTheme("ace/theme/monokai");//monokai设置编辑器语言模式getSession().setMode(mode)
<br/>
editor.getSession().setMode("ace/mode/html");//语言支持以下
<br/>
|-- 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 rangeeditor.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在线演示实例
在线工具，工具里面全是
ace.js完成的，点击进入在线工具
<br/>
辽公网安备21010602000703号