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

时间: 2019-08-21阅读: 1331标签: 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.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

    用一个通俗的例子讲清楚API

    随着移动互联网的发展, 基于互联网的应用正变得越来越普及,在这个过程中,更多的平台将自身的资源开放给开发者来调用。对外提供的API 调用使得平台之间的内容关联性更强,同时这些开放的平台也为用户、开发者和中小网站带来了更大的价值。

    认识 Fetch API

    Fetch API 已经作为现代浏览器中异步网络请求的标准方法,其使用 Promise 作为基本构造要素。Fetch 在主流浏览器中都有很好的支持,除了IE。

    Vue 3.0 的 Composition API 尝鲜

    虽然 Vue 3.0 尚未发布,但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。

    Vue 3.0 体验 Vue Function API

    近 Vue 官方公布了 Vue 3.0 最重要的RFC:Function-based component API,并发布了兼容 Vue 2.0 版本的 plugin:vue-function-api,可用于提前体验 Vue 3.0 版本的 Function-based component API

    API接口设计,需要注意这4点

    原则上API接口设计一般出现在开发的详细设计中,但是随着诸多公司建立开放平台,产品经理也逐渐需要能理解API接口,尤其是做平台性的产品,还要学会定义接口。本文就关于产品经理在设计接口中需要定义什么

    怎样让 JS - API 具有更好的实用性

    怎么让 API 更加的实用,更好的复用。1.代码的实用性,只能尽量,尽量再尽量。不会出现完美的API,或者是一次编写,永不修改的 API 。API 命名和扩展性也很重要。

    API是什么?

    API就是接口,就是通道,负责一个程序和其他软件的沟通,本质是预先定义的函数。譬如我们去办事,窗口就类似一个API,如果对于某一件不简单的事情,这个窗口能做到让我们,当然,API不太一样,适用接口隔离原则,即使用多个隔离的接口

    RESTful API风格

    首先要说,不管你的API属于哪种风格,只要能够满足工作需要,就足够了。API格式并不存在绝对的标准,只存在不同的设计风格。API设计包含两部分:请求和响应。

    Node.js中Streams

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

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

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

    点击更多...

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

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

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