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

时间: 2019-08-21阅读: 92标签: 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


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

    SDK 与API之间的关系和联系

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

    Node.js中Streams

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

    Vue 3.0 的 Composition API 尝鲜

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

    Vue3.0 Function API

    Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧!首先官方回答了几个最受关注的问题

    RESTful API风格

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

    [探索]怎么样的参数能让 JS - API 更灵活

    外在决定是否需要了解内在,内在决定是否会一票否决外在。内外结合,好上加好。 开发 API 的时候,把参数的名字和位置确定下来,函数定义就可以说是完成了。

    用Node.js创建安全的 GraphQL API

    本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。使用 GraphQL API 的目的是什么?什么是GraphQL API?什么是GraphQL查询?GraphQL的好处是什么?GraphQL是否优于REST?为什么我们使用Node.js?

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

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

    在原生 React Native 应用中使用 Expo API

    你可以在任何 React Native 应用程序中使用尽可能少或尽可能多的 Expo SDK。 我们已经花了很多时间构建和维护这些包含原生应用特性的跨平台 API,我们很高兴最终实现了向整个 React Native 生态共享这些 API

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

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

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