Ace编辑器如何设置源码路径

Question

我在本地离线嵌入 Ace，因此不使用托管的 package 并且受同源策略约束。 您如何告诉 ace 在特定文件夹中查找模式、主题和工作程序的来源？

你曾经能够使用：

editor.config.set("modePath", "Scripts/Ace");
editor.config.set("workerPath", "Scripts/Ace");
editor.config.set("themePath", "Scripts/Ace");

但这在最新版本中不起作用。 如何实现？

提前致谢

Answer 1

我遇到了类似的问题，你可以让Ace知道基本文件夹的路径是什么： ace.config.set("basePath", "/Scripts/Ace");

这与我的最新版本v1.1.3一起工作

Answer 2

实现相同目标的简单方法是手动将所有脚本从Ace源文件夹嵌入到网页中，不包括worker-xxx.js文件。 这仍然是一个小屋。

Answer 3

@rorofromfrance的答案解决了我在动态加载Ace 脚本时的基本文件夹路径问题：

$.getScript($('#js')[0].href, function() {
    $('.theme').change(function() {draw.change();});
    $.getScript("/ace/src-min/ace.js", function() {
        if (!editor) {ace.config.set("basePath", "/ace/src-min"); draw.editor();};
        $.getScript("/underscore/underscore-min.js", function() {
            editor.getSession().on('change', _.debounce(function() {draw.diagram();}, 100));
            $.getScript("/tensorflow/tf.min.js", function() {
                $.ajax({
                    type: "GET",
                    dataType: "xml",
                    url: "/sitemap.xml", 
                    success: draw.getJSON(xml)
                });
            });
        });
    });
});  

Answer 4

我在当前的项目中有类似的要求。

我创建了一个 Angular 项目，所有文件捆绑在一个目录中，在运行时无法访问node_modules ，使用远程 package 作为 ace basePath是不可能的。

然后我偶然发现了 Ace 嵌入指南，它告诉我可以直接从我的依赖项中导入相关模式和主题，只需使用new而不是路径字符串。

https://ajaxorg.github.io/ace-api-docs/index.html#embedding-ace

来自文档：

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());

所以我只是导入了我去过的模式和主题，并直接将它们提供给 Ace

import DraculaTheme from "ace-builds/src-noconflict/theme-dracula";
import JavaScriptMode from "ace-builds/src-noconflict/mode-javascript";

const aceEditor = ace.edit(this.editor.nativeElement);
aceEditor.session.setValue("function greet() {\n\tconsole.log('hello world');\n}\n");

aceEditor.setTheme(DraculaTheme);
aceEditor.session.setMode(new JavaScriptMode.Mode());

请注意，我没有设置任何basePath ！！！