扩展ace编辑器，如何导入自定义文件答案

【问题标题】：extend ace editor, how to import custom files扩展ace编辑器，如何导入自定义文件
【发布时间】：2016-05-12 19:55:40
【问题描述】：

Java Script 和我不是朋友。

Ace 是 javascript 中的一个代码 ide，可以为它编写自定义模式，将自定义 sn-ps 添加到模式，编写自定义自动完成程序。我知道如何编写代码来做一些我不明白的事情是如何将这些东西集成到 JavaScript 中。

有这个define("mode/blabla",["exports","modules,..],(exports,modules) -> {} 这看起来与角度加载模块的方式非常相似，但是当我只是在 html 中添加脚本时，它不知道定义方法。我是否需要构建整个东西才能让它工作。就像将文件放在 ace 文件夹中并构建它一样。我真的很想只使用 bower import angular-ace-ui 然后自己提供我的小模式、突出显示和完成文件。所以我可以让我自己的东西易于访问、可编辑并与我现在在 bower-components/ace-builds/ 中的完整 ace 分开。

有人可以向我解释或指出一个很好的学习材料，它教我如何在 ace 等 java 脚本项目中进行依赖、导入和函数集成。我了解 Java，但是 Java 脚本很奇怪，很难遍历代码来查看事物的来源和去向。

我试过了，但它不起作用，因为它在构建过程之外，我不知道在哪里寻找挂钩。

< script src = "../src-noconflict/ace.js" > < /script>
<!-- load ace language tools -->
<script src="../src - noconflict / ext - language_tools.js "></script>
<script src=".. / .. / .. / app / scripts / editor / mode / myql.js "></script>
<script src=".. / .. / .. / app / scripts / editor / snippets / myql.js "></script>
<script>
    // trigger extension
    var langtools = ace.require("
ace / ext / language_tools ");
    var editor = ace.edit("
editor ");
    editor.session.setMode("
ace / mode / myql ");
    editor.setTheme("
ace / theme / chrome ");

    // enable autocompletion and snippets
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
</script>

我想让这样的东西工作 'autocomplete/completer' 'ace/mode/myql' 是我想集成的模块。我得到了肮脏的代码，但没有让它可访问的方法。这些文件的格式类似于这里的模式，请参见 sql.js 和 sql_highlight_rules.js https://github.com/ajaxorg/ace/tree/master/lib/ace/mode

 <div ui-ace="{
            useWrapMode : true,
            showGutter: false,
            theme:'chrome',
            mode: 'mysql',
            require: ['ace/ext/language_tools','autocomplete/mycompleter','ace/mode/myql'],
            advanced: {
                enableSnippets: true,
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true
            }
          }"></div>

【问题讨论】：

标签： javascript requirejs ace-editor

【解决方案1】：

我想我找到了做事的正确方法。忘记 angular-ace-ui 它只会使事情复杂化。

凉亭安装王牌

放置 custom_mode.js、custom_highlight_rules.js、custom_sn-ps.js、customer_sn-ps.txt、custom_completer.js 在您的源文件夹中的某个位置。像

中的类似文件一样设置它们

bower_components/ace/lib.ace/
    ./mode
    ./snippets
    ./autocomplete

设置一个 grunt 或 gulp 或任何构建任务将文件从您的工作目录复制到上面提到的 bower_components 文件夹。然后运行 ace 构建节点 ./Makefile.dryice.js

现在通过您需要的 bower 覆盖导入工作文件

"overrides": {
    "ace": {
      "main": [
        "build/src-min-noconflict/ace.js",
        "build/src-min-noconflict/ext-language_tools.js",
        "build/src-min-noconflict/theme-monokai.js",
        "build/src-min-noconflict/custom_mode.js",
        "build/src-min-noconflict/snippets/custom_mode.js"
      ]
    }

通常只有在您更改内容时才需要 ace 构建，并且不需要减慢默认应用构建的速度。我还没有尝试过，但理论上我看不出它为什么不起作用。我认为这是最简单的设置方法，可以轻松地使用自定义版本，同时保持外部 ace 文件不变。

我玩弄了使用 ace-ui 角度控制器在 onload 中设置所有内容的想法，但模式需要由模式名称引用。它适用于完成者，因为它只需要调用 langTools.addCompleter(newcompleter) 方法并使用 getCompletions 函数参数传入一个对象。但是，该模式需要以某种方式按照定义进行注册，我不知道如何在 ace 构建管道之外执行此操作。因此，我的解决方案看起来就是这样。

【讨论】：