-
简介
ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。 -
特性
- 代码高亮
- 自动缩进
- 更换主题
- 搜索和替换支持正则表达式
- 高亮选中
- 代码折叠
-
下载地址
- 网盘地址
- 官网地址和文档
- github地址
-
使用教程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>web编辑器</title>
<style type="text/css" media="screen">
#box {
width: 50%;
height: 500px;
}
#editor {
width: 100%;
height: 100%;
}
.ace_print-margin {
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="editor">
{
"showapi_res_error": "",
"showapi_res_id": "7c9bf9b98da546e99e9cf500d28fc04b",
"showapi_res_code": 0,
"showapi_res_body": {
"ret_code": 0,
"pagebean": {
"cur_song_num": 100,
"code": 0,
"day_of_year": "",
"song_begin": 0,
"totalpage": 1,
"songlist": [
{
"albumid": 6272362,
"albummid": "0005ixSf2Qclga",
"albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/g/a/0005ixSf2Qclga.jpg",
"albumpic_small": "http://i.gtimg.cn/music/photo/mid_album_90/g/a/0005ixSf2Qclga.jpg",
"songid": 228853305,
"songname": "没有意外",
"singerid": 1016794,
"singername": "蔡徐坤",
"seconds": 315,
"downUrl":
"http://dl.stream.qqmusic.qq.com/228853305.mp3?vkey=F3C56968E08112DB5252DFFBC1C1B90C19DA3D6489E3A5C4BCE544A71A8A24471259DF3490883C03614B03090E5BD9FFB6F2B5D4766F2399&guid=2718671044",
"url": "http://ws.stream.qqmusic.qq.com/228853305.m4a?fromtag=46"
},
{
"albumid": 5868415,
"albummid": "003hzX7h4Flbcb",
"albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/c/b/003hzX7h4Flbcb.jpg",
"albumpic_small": "http://i.gtimg.cn/music/photo/mid_album_90/c/b/003hzX7h4Flbcb.jpg",
"songid": 225716644,
"songname": "知否知否",
"singerid": 24833,
"singername": "胡夏",
"seconds": 276,
"downUrl":
"http://dl.stream.qqmusic.qq.com/225716644.mp3?vkey=F3C56968E08112DB5252DFFBC1C1B90C19DA3D6489E3A5C4BCE544A71A8A24471259DF3490883C03614B03090E5BD9FFB6F2B5D4766F2399&guid=2718671044",
"url": "http://ws.stream.qqmusic.qq.com/225716644.m4a?fromtag=46"
},
],
"total_song_num": 100,
"ret_code": 0,
"update_time": "2019-02-21",
"color": 11310461,
"comment_num": 12878,
"currentPage": 1
},
"mydata": "11111",
"aaaaaa": {
"name": "张三",
"age": "30"
},
"url": "http://undefined"
}
}
</div>
</div>
<!-- 主要文件 -->
<script src="https://cdn.bootcss.com/ace/1.4.2/ace.js"></script>
<!-- 用来提供代码提示和自动补全的插件 -->
<script src="https://cdn.bootcss.com/ace/1.4.2/ext-language_tools.js"></script>
<script>
// ace.require("ace/ext/language_tools");
// 初始化editor()
var editor = ace.edit("editor");
editor.setOptions({
// 默认:false
wrap: true, // 换行
// autoScrollEditorIntoView: false, // 自动滚动编辑器视图
enableLiveAutocompletion: true, // 智能补全
enableSnippets: true, // 启用代码段
enableBasicAutocompletion: true, // 启用基本完成 不推荐使用
});
// 设置主题 cobalt monokai
editor.setTheme("ace/theme/cobalt");
// 设置编辑语言
editor.getSession().setMode("ace/mode/javascript");
editor.setFontSize(12);
editor.setReadOnly(true)
editor.getSession().setTabSize(2);
// 获取编辑内容
// var v = editor.getValue();
// console.log(v);
// 编辑内容搜索 快捷键打开->ctrl+f
// editor.execCommand('find');
// 设置编辑内容
// var editorValue = '<h2>测试数据</h2>';
// editor.setValue(editorValue);
</script>
</body>
</html>
- API
require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模板;引入theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.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); ##设置编辑器只读
- 事件监听
- 监听改变事件:
editor.getSession().on('change', function(e) { // e.type, etc });
- 监听选择事件:
editor.getSession().selection.on('changeSelection', function(e) { });
- 监听光标移动:
editor.getSession().selection.on('changeCursor', function(e) { });