扩展 ACE 编辑器，如何导入自定义文件

extend ace editor, how to import custom files

本文关键字：导入 自定义 文件 何导入 ACE 编辑器 扩展      更新时间：2023-09-26

Java Script和我不是朋友。

Ace是javascript中的一个代码IDE，可以为其编写自定义模式，向模式添加自定义代码段，编写自定义自动完成器。我知道如何编写代码来做一些我不明白的事情，那就是如何在 JavaScript 中集成这些东西。

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

我想让这样的东西工作"自动完成/完成器"ace/mode/myql"是我想集成的模块。我得到了下来和肮脏的代码，但没有办法让它可访问。这些文件的形式类似于这里的模式，请参阅sql.js和sql_highlight_rules.jshttps://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>

我想

我找到了正确的做事方法。忘记角度王牌UI，它只会使事情复杂化。

鲍尔安装王牌

地点custom_mode.js、custom_highlight_rules.js、custom_snippets.js、customer_snippets.txt custom_completer.js在源文件夹中的某个位置。将它们设置为与 中的类似文件完全相同

bower_components/ace/lib.ace/
    ./mode
    ./snippets
    ./autocomplete
设置一个咕噜咕噜

或咕噜咕噜或任何构建任务将文件从工作目录复制到上述bower_components文件夹中。然后运行 ace 构建节点 ./Makefile.dryice.js

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

"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 角度控制器在负载中设置所有内容的想法，但模式需要由模式名称引用。它适用于完成器，因为这只需要调用langTools.addCompleter(newcompleter(方法并使用getCompletions函数参数传入一个对象。但是，该模式需要以某种方式注册为已定义，我不知道如何在 ace 构建管道之外执行此操作。因此，我的解决方案看起来像它的方式。

相关文章：