基于Web的代码编辑器 Ace的使用
简介ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。特性代码高亮自动缩进更换主题搜索和替换支持正则表达式高亮选中代码...
·
-
简介
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) { });
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)