ace.js初始化函数封装

拼搏现实的明天。 2023-06-29 05:47 9阅读 0赞

## ace介绍 ##

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

## 下载编译 ##

git clone https://github.com/ajaxorg/ace.git
    npm install
    node ./Makefile.dryice.js

## 初始化函数封装示例 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        //必须给包裹元素设置宽高
        <style>
             #editor{ 
                 width:600px;
                 height:300px;
             }
        </style>
    </head>
    <body>
        <div id="editor"></div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
        <script>
             //初始化editor：ace.edit(domIdStr[string])
             var editor = ace.edit('editor');
             init_acs('json', 'monokai', editor);
             function init_acs(language, theme, editor) { 
                //设置主题
                editor.setTheme("ace/theme/" + theme);
                //设置编辑语言
                editor.session.setMode("ace/mode/" + language);
                //设置字体大小
                editor.setFontSize(15);
                设置是否只读
                //editor.setReadOnly(false);
                //自动换行,设置为off关闭
                editor.setOption("wrap", "free");
                //启用提示菜单
                ace.require("ace/ext/language_tools");
                editor.setOptions({ 
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    autoScrollEditorIntoView: true
                });
            }
        </script>
    </body>
    </html>