ACE Editor 常规使用方法及注意事项

1.ace editor  在GitHub 下载即可 注意要下载已经编译过的版本（https://download.csdn.net/download/qq_36894527/12443877）

2.引入主要的几个文件 ace.js（主文件），ext-language_tools.js（编译代码的文件）

 <div id="editor"><div>

var editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setReadOnly(false)//是否为只读
    editor.setFontSize(16);//设置字号
    editor.session.setMode("ace/mode/csharp");// 设置编辑语言
    editor.setTheme("ace/theme/twilight"); // 设置主题  cobalt monokai，twilight,(暗黑)，xcode(亮白)
    //editor.execCommand('find');// 编辑内容搜索  快捷键打开->ctrl+f
    editor.setShowPrintMargin(false);
    editor.setOptions({
        wrap: true, // 换行
        autoScrollEditorIntoView: true, // 自动滚动编辑器视图
        enableBasicAutocompletion: true,// 启用基本完成 不推荐使用
        enableSnippets: true,// 启用代码段
        enableLiveAutocompletion: true // 智能补全
    });
    //editor.getSession().setTabSize(2);
//自定义代码提示
    let _comp_cfg = [{
        name: "forEach", //显示的名称，‘奖金’
        value: "forEach((v,k)=>{})", //插入的值，‘100’
        caption:"fe"，//这才是关键字
        score: 100, //分数，越大的排在越上面
        meta: "遍历" //描述，‘我的常量
    }]

    ace.config.loadModule("ace/ext/language_tools", function (module) {
        module.addCompleter({
            getCompletions: function (editor, session, pos, prefix, callback) {
                if (prefix.length === 0) { callback(null, []); return }
                callback(null, _comp_cfg);
            }
        });
    });
    //格式化代码
    var beautify = ace.require("ace/ext/beautify");
    beautify.beautify(editor.session);
    //function
    // var v = editor.getValue();// 获取编辑内容
    //editor.setValue("string "); // 设置编辑内容
    //require("lib/ace"); ##引入
    //editor.setTheme("ace/theme/solarized_dark");##设置模板；引入theme-solarized_dark.js模板文件
    //editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
    //editor.setValue("the new text here");##设置内容
    //editor.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); ##使用软标签.
    //document.getElementById('editor').style.fontSize='12px';  ##设置字体大小
    //editor.getSession().setUseWrapMode(true); ##设置代码折叠
    //editor.setHighlightActiveLine(false); ##设置高亮
    //editor.setShowPrintMargin(false); ##设置打印边距可见度

4.注意事项

光标位置不在正确位置上：可设置字号进行调节 editor.setFontSize(16);//设置字号

编辑框出现灰色线：editor.setShowPrintMargin(false);//隐藏打印边距