ace.js代码编辑器插件的使用教程

@一棵菜菜  April 20, 2018

简介:

(在编辑器的代码组件、自定义CSS功能、网站代码功能使用了此插件。)
ace.jsE是一个独立的JavaScript编写的代码编辑器。其目标是创建一个基于浏览器的编辑器,如TextMate的VIM或Eclipse现有的本地编辑功能,可用性和性能进行匹配和扩展。它可以很容易地嵌入任何网页或JavaScript应用程序。
特点:语法高亮超过40种语言 超过20个主题 自动缩进,减少缩进 一个可选的命令行 处理庞大的文件(在最后一次检查,4,000,000行的上限) 完全自定义的键绑定 用正则表达式的搜索和替换 突出显示匹配的括号 软标签和实际标签之间切换 显示隐藏字符 使用鼠标拖放文本 换行 代码折叠 多个光标和选择 目前的JavaScript / CoffeeScript的/ CSS/ XQuery的语法检查 剪切,复制和粘贴功能 。

1、参考文档:
https://ace.c9.io/#nav=api
https://github.com/ajaxorg/ace/

2、在线使用案例:
https://ace.c9.io/build/kitchen-sink.html

3、下载地址:
https://github.com/ajaxorg/ace/releases/tag/v1.2.8

4、教程:
(1)新建index.html:


    <!DOCTYPE html>
        <html lang="en">
        <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #editor {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    </head>
    <body style="width:100%;height:100%;">
    <div id="editor"></div>
    <script src="./ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="./theme-twilight.js" type="text/javascript" charset="utf-8"></script>
    <script src="./mode-javascript.js" type="text/javascript" charset="utf-8"></script>

    <script src="./theme-idle_fingers.js" type="text/javascript" charset="utf-8">        </script>
    <script src="./worker-javascript.js" type="text/javascript" charset="utf-8"></script>
<script src="./ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 对应DOM的id值
        var editor = ace.edit("editor");
        // 设置代码编辑器主题套装
        editor.setTheme("ace/theme/idle_fingers");
        // 设置当前编辑器支持的语言(似乎一次只能选一种语言,我暂时未找到一次支持多语言的写法)
        editor.getSession().setMode('ace/mode/javascript');
        // 不使用检查者(解决下面的bug我才使用的这个)
       editor.getSession().setUseWorker(false);
        // 设置光标所在的激活行是否高亮
        editor.setHighlightActiveLine(true);
        // 设置代码的字体大小
        editor.setFontSize(14);
        // 设置是否开启代码折叠效果
        editor.getSession().setUseWrapMode(true);
        editor.getSession().setUseSoftTabs(true);
        // 开启代码自动提示补全
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        // 监听编辑器内容变化
        editor.getSession().on('change', function(e) {
        // 获取编辑区的代码内容
            var data = editor.getValue();
        });
    </script>
    </body>
    </html>

(2)同级文件下引入:
ace.js, (ace核心功能)
mode-html.js,mode-css.js,mode-javascript.js, ("mode-"支持的语言,可选择)
theme-twilight.js,theme-idle_fingers.js,("theme-"代码编辑器主题套装,可选择)
worker-html.js,worker-css.js,worker-js.js,: ("worker-"代码编辑器中的某个语言的工作者,比如统计编辑器中的错误、警告等信息。引入时需要和"mode-"对应引入,可选择)。

(3)
// 使用代码编辑器自带的错误/警告等的信息收集

 editor.getSession().getAnnotations();

(4)bug问题小结:
在编辑器的自定义CSS功能里,由于设置的语言为CSS,所以默认ace会分配CSS的worker,所以会调用worker-css.js。但由于发布到测试环境和线上后,出现了bug:如非html语言的(如CSS)ace编辑器检测到错误或警告(左侧边栏有角标提示),当点击保存按钮后,再次打开改编辑弹窗,在编辑区键盘按enter或空格键,将会自动聚焦到页面上的"保存“按钮,即相当于在编辑区无法使用enter回车键了。
所以我在”自定义CSS“功能里,使用了editor.getSession().setUseWorker(false),将不再监听信息,来解决这个bug。应该有更合理的解决办法或代码使用,由于时间问题暂未深入研究,待后续再研究。


添加新评论