Search code examples
ace-editor

Host mode files separately from Ace Editor

I want to bundle ACE Editor with the desktop application and render it inside WebView. Ace is running from file:/// protocol. Is there any way to host Mode files separately from ace.js? For example ace.js will be located inside the application bundle /Application/MyApp.app/..., but mode files at ~/Library/Application Support/MyApp/ace/modes.

I started with test project and have the following code

<script type="text/javascript">
    var require = {
        baseUrl: window.location.protocol + "//" + window.location.host
                + window.location.pathname.split("/").slice(0, -1).join("/"),
        paths: {
            "ace/mode": "/Users/user/ace-build",
        }
    };
</script>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="ace/ace.js"></script>
<script type="text/javascript">
    require(["ace/ace"], function(ace){
        var editor = ace.edit("editor-container");
        editor.getSession().setUseWorker(false);
        editor.setTheme("ace/theme/xcode");
        editor.getSession().setMode("ace/mode/javascript");
    });
</script>

I expect that module ace/mode/javascript will be loaded from /Users/user/ace-build/javascript but it loads from ace/mode-javascript.js. How to make modes loading from different location?

Solution

  • use

    require("ace/config").set("modePath", require.toUrl("ace/mode"))

    if ext-* and other files are in the same folder you can do .set("basePath", ..) instead