CODEWITHSUNDEEP
javascriptace-editor
James
James

Reputation: 31738

How to set the source path in Ace editor

I am embedding Ace locally offline and so am not using the hosted package and am subject to the same origin policy. How do you tell ace to look in a particular folder for it's source of modes, themes and workers?

You used to be able to use:

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

But that doesn't work in the latest version. How can this be achieved?

Thanks in advance

Upvotes: 7

Views: 8672

Answers (4)

svarog
svarog

Reputation: 9839

I have a similar requirement in a current project of mine.

I created an Angular project with all the files bundles in a single directory without access to node_modules in runtime, using a remote package for the ace basePath was out of the question.

Then I stumbled upon the Ace embedding guide and it clued me that I can import the relevant modes and themes straight from my dependencies and just use new instead of a path string.

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

from the docs:

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

So I just imported the mode and theme I went and provided them straight to 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());

Notice that I didn't set any basePath !!!

enter image description here

Upvotes: 3

eQ19
eQ19

Reputation: 10701

The answer from @rorofromfrance solve my problem of the base folder path on loading Ace script on the fly:

$.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)
                });
            });
        });
    });
});

Upvotes: 0

rorofromfrance
rorofromfrance

Reputation: 1904

I had a similar issue and you can actually let Ace know what's the base folder path this way: ace.config.set("basePath", "/Scripts/Ace");

This work with the latest version I have, v1.1.3

Upvotes: 12

James
James

Reputation: 31738

The simple way to achieve the same thing is to embed all scripts from the Ace source folder into the web page manually, excluding the worker-xxx.js files. This is still a bodge though.

Upvotes: 1

Related Questions