基于Web的代码编辑器 Ace的使用

最新推荐文章于 2024-06-18 12:46:54 发布

IT码农-爱吃辣条

最新推荐文章于 2024-06-18 12:46:54 发布

阅读量1.6w

点赞数 3

分类专栏： Web 文章标签： Ace Web

本文链接：https://blog.csdn.net/qq_24504591/article/details/87969511

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介
ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。
特性
- 代码高亮
- 自动缩进
- 更换主题
- 搜索和替换支持正则表达式
- 高亮选中
- 代码折叠
下载地址
- 网盘地址
  - 链接：https://pan.baidu.com/s/1v7nnF4CYJcw9m2VihSp5uw
  - 提取码：w8wx
- 官网地址和文档
  - https://ace.c9.io/
- github地址
  - https://github.com/ajaxorg/ace
使用教程

<!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>

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) {  
});

IT码农-爱吃辣条

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
基于Web的代码编辑器 Ace的使用

简介ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。特性代码高亮自动缩进更换主题搜索和替换支持正则表达式高亮选中代码...
复制链接

扫一扫

专栏目录