ACE Editor在线代码编辑器的API使用文档

时间: 2019-08-21阅读: 283标签: api

ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。

ACE是Mozilla Skywriter(以前称为Bespin)项目的继任者,并作为Cloud9的主要在线编辑器。

以下是它的详细特性:

  • 可以对60多种语言进行语法着色(可以导入TextMate/Sublime/.tmlanguage 文件)
  • 20多种主题(可以导入TextMate/Sublime/.tmtheme文件)
  • 自动缩进,减少缩进
  • 一个可选的命令行
  • 处理巨大的文件,可以处理4,000,000行代码
  • 完全自定义的键绑定,包括V正则表达式搜索和替换
  • 高亮匹配括号
  • 软标签和真正的标签之间切换
  • 显示隐藏的字符
  • 用鼠标拖放文本
  • 换行
  • 代码折叠
  • 多个光标和选择
  • 实时语法检查器(支持 JavaScript/CoffeeScript/CSS/XQuery)
  • 剪切,复制和粘贴功能IM和Emacs模式

项目地址:git clone git://github.com/ajaxorg/ace.git


    使用引导:

    1、引入

    var ace = require("lib/ace");


    2、设置主题

    editor.setTheme("ace/theme/twilight");


    3、设置程序语言模式

    editor.getSession().setMode("ace/mode/javascript");


    4、一般常用操作
    设置、获取内容:

    editor.setValue("the new text here"); // or session.setValue
    editor.getValue(); // or session.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);

    设置字体大小,这个其实不算API:

    document.getElementById('editor').style.fontSize='12px';

    设置代码折叠:

    editor.getSession().setUseWrapMode(true);

    设置高亮:

    editor.setHighlightActiveLine(false);

    设置打印边距可见度:

    editor.setShowPrintMargin(false);

    设置编辑器只读:

    editor.setReadOnly(true);  // false to make it editable


    5、触发尺寸缩放
    编辑器默认自适应大小,如果要程序控制resize,使用如下方法:

    editor.resize();


    6、搜索

    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: 搜索范围,要搜素整个文档则设置为空
    regExp: 搜索内容是否是正则表达式,默认为false
    start: 搜索起始位置
    skipCurrent: 是否不搜索当前行,默认为false
    替换单个字符:

    editor.find('foo');
    editor.replace('bar');

    替换多个字符:

    editor.replaceAll('bar');

    editor.replaceAll使用前需要先调用editor.find('needle', ...)


    7、事件监听
    监听改变事件:

    editor.getSession().on('change', function(e) {
        // e.type, etc
    });

    监听选择事件:

    editor.getSession().selection.on('changeSelection', function(e) {});

    监听光标移动:

    editor.getSession().selection.on('changeCursor', function(e) {});


    8、添加新命令、绑定按键
    要指定键绑定到一个自定义函数:

    editor.commands.addCommand({
        name: 'myCommand',
        bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
        exec: function(editor) {
            //...
        },
        readOnly: true // 如果不需要使用只读模式,这里设置false
    });


    详细API:http://ace.c9.io/#nav=api


    吐血推荐

    1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

    2.休闲娱乐: 网页游戏  直播/交友   H5游戏

    链接: http://www.fly63.com/article/detial/4862

    webService和Restful

    restful是一种架构风格,其核心是面向资源,更简单;而webService底层SOAP协议,主要核心是面向活动;两个都是通过web请求调用接口

    使用 JS 来动态操作 css ,你知道几种方法?

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API,还有一组不太为人所知的 CSS API

    在 Node.js 上运行 Flutter Web 应用和 API

    大量的跨平台应用开发框架,使你可以编写一次代码,然后在 Android,iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架,例如 Ionic,Xamarin 和 React Native。另一个相对较新的框架是 Flutter

    vue-next 函数式 api

    在分享 vue-next 各个子模块的实现之前,我觉的有必要比较全面的整理下 vue-next 中提出的函数式 api,了解这些的话,无论是对于源码的阅读,还是当正式版发布时开始学习,应该都会有起到一定的辅助作用

    解锁设计优质API的五种秘籍

    如今,随着我们构建软件方式的变化,以及API平台的爆炸式激增,各大公司都必须以更快的速度构建出自己的产品、并推向市场。目前,几乎所有的软件需求都需要通过API来提供相应的解决方案,其中包括:支付类API、通信类API

    Moment.js常用API速查

    日常开发经常会用Moment.js来处理时间,现对频繁使用的几个API做下整理,以便日后查阅。

    SDK 与API之间的关系和联系

    SDK(Software Development Kit,软件开发工具包)一般都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合,比如提供安卓开发工具、或者基于硬件开发的服务等。也有针对某项软件功能的SDK

    基于 React 和 Redux 的 API 集成解决方案

    在前端开发的过程中,我们可能会花不少的时间去集成 API、与 API 联调、或者解决 API 变动带来的问题。如果你也希望减轻这部分负担,提高团队的开发效率,那么这篇文章一定会对你有所帮助。文章中使用到的技术栈主要有:

    API文档管理工具折射出的技术视野

    网上看到不少关于如何提升技术视野的讨论,但却没有人给出定义,到底什么是技术视野?所谓技术视野,就是看问题时所能切换的不同角(维)度。下面就以API管理工具

    Node.js中Streams

    NodeJs流以难以使用而闻名,甚至更难理解。 好吧,我给你带来了好消息 - 现在已经不是这样了。多年来,开发人员创建了许多软件包,其唯一目的是为了更容易的使用流。 但是,在本文中,我将重点介绍NodJs 原生的流API。

    fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

    广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

    小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全