基于Web的代码编辑器Ace的使⽤
1. 简介
ACE 是⼀个开源的、独⽴的、基于浏览器的代码编辑器，可以嵌⼊到任何web页⾯或JavaScript应⽤程序中。ACE⽀持超过60种语⾔语法⾼亮，并能够处理代码多达400万⾏的⼤型⽂档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。
2. 特性
1. 代码⾼亮
2. ⾃动缩进
3. 更换主题
4. 搜索和替换⽀持正则表达式
5. ⾼亮选中
6. 代码折叠
3. 下载地址
1. ⽹盘地址
1. 链接：
2. 提取码：w8wx
2. 官⽹地址和⽂档
1.
3. github地址
1.
4. 使⽤教程
<!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": "i.gtimg/music/photo/mid_album_300/g/a/0005ixSf2Qclga.jpg",
"albumpic_small": "i.gtimg/music/photo/mid_album_90/g/a/0005ixSf2Qclga.jpg",
"songid": 228853305,
"songname": "没有意外",
"singerid": 1016794,
"singername": "蔡徐坤",
"seconds": 315,
"downUrl":
"dl.stream.qqmusic.qq/228853305.mp3?vkey=F3C56968E08112DB5252DFFBC1C1B90C19DA3D6489E3A5C4BCE544A71A8A24471259D F3490883C03614B03090E5BD9FFB6F2B5D4766F2399&guid=2718671044",
"url": "ws.stream.qqmusic.qq/228853305.m4a?fromtag=46"
},
{
"albumid": 5868415,
"albummid": "003hzX7h4Flbcb",
"albumpic_big": "i.gtimg/music/photo/mid_album_300/c/b/003hzX7h4Flbcb.jpg",
"albumpic_small": "i.gtimg/music/photo/mid_album_90/c/b/003hzX7h4Flbcb.jpg",
"songid": 225716644,
"songname": "知否知否",
"singerid": 24833,
"singername": "胡夏",
"seconds": 276,
"downUrl":
"dl.stream.qqmusic.qq/225716644.mp3?vkey=F3C56968E08112DB5252DFFBC1C1B90C19DA3D6489E3A5C4BCE544A71A8A24471259D F3490883C03614B03090E5BD9FFB6F2B5D4766F2399&guid=2718671044",
"url": "ws.stream.qqmusic.qq/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": "undefined"
}
}
</div>
</div>
<!-- 主要⽂件 -->
<script src="cdn.bootcss/ace/1.4.2/ace.js"></script>
<!-- ⽤来提供代码提⽰和⾃动补全的插件 -->
<script src="cdn.bootcss/ace/1.4.2/ext-language_tools.js"></script>
<script>
/
/ quire("ace/ext/language_tools");
// 初始化editor(）
var editor = ace.edit("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.setFontSize(12);
editor.setReadOnly(true)
// 获取编辑内容
// var v = Value();
// console.log(v);
/
/ 编辑内容搜索快捷键打开->ctrl+f
// Command('find');
// 设置编辑内容
// var editorValue = '<h2>测试数据</h2>';
// editor.setValue(editorValue);
</script>
</body>
</html>
5. API
require("lib/ace"); ##引⼊
editor.setTheme("ace/theme/solarized_dark");##设置模板；引⼊theme-solarized_dark.js模板⽂件Session().setMode("ace/mode/javascript"); ##设置程序语⾔模式
editor.setValue("the new text here");##设置内容
SelectionRange()); ##获取选择内容
editor.insert("Something cool"); ##在光标处插⼊
Cursor(); ##获取光标所在⾏或列
Length(); ##获取总⾏数
editor.setHighlightActiveLine(false); ##设置⾼亮
editor.setShowPrintMargin(false); ##设置打印边距可见度
editor.setReadOnly(true); ##设置编辑器只读
6. 事件监听
1. 监听改变事件:
// e.type, etc
});
2. 监听选择事件:
vim编辑器怎么用});
3. 监听光标移动:
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。