Skip to content

Loading…

I struggle and fail with "Embedding ACE in Your Site" and RequireJS. #1017

Closed
NodeGuy opened this Issue · 5 comments

3 participants

@NodeGuy

I'm trying to follow the directions to embed ACE in my site using RequireJS as documented in Embedding ACE in Your Site:

  1. Download the contents of lib/ace.
  2. Modify the sample code to remove the non-local script tag, to include RequireJS, and to include var ace = require("lib/ace"); as directed:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

<script src="lib/require.js"></script>
<script>
    var ace = require("lib/ace");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>

I get the following error message in the console of Firefox:

[20:44:34.694] Error: Module name "lib/ace" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded @ file:///Users/david/Desktop/test/lib/require.js:8

I noticed that the suggested use of RequireJS (var ace = require("lib/ace");) doesn't match the documentation for RequireJS, so I tried changing it to follow the RequireJS API:

    require(["lib/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });

I get the error message:

[20:47:50.348] Error: Load timeout for modules: lib/ace
http://requirejs.org/docs/errors.html#timeout @ file:///Users/david/Desktop/test/lib/require.js:8

Thinking that RequireJS is really wanting a JavaScript file, not a directory, I change it again to this:

    require(["lib/ace/ace.js"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });

and get this error message:

[20:50:39.677] Error: Load timeout for modules: ace/requirejs/text!lib/ace/css/editor.css_unnormalized2,ace/requirejs/text,ace/requirejs/text!lib/ace/theme/textmate.css_unnormalized3
http://requirejs.org/docs/errors.html#timeout @ file:///Users/david/Desktop/test/lib/require.js:8

At this point I give up. :-(

@nightwing
Ajax.org B.V. member

see https://github.com/ajaxorg/ace/blob/master/kitchen-sink.html#L258-266
you need to configure paths first

paths: {
              ace: "lib/ace"
          }
@NodeGuy

I see, thank you. I was able to get it working but configuring the paths wasn't all I needed to do. Perhaps you could include the following, which was the minimum I needed for it to work, on the Embedding ACE in Your Site page to help others:

<script src="lib/require.js"></script>
<script>
    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: "lib/ace"
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });
</script>
@nightwing
Ajax.org B.V. member

baseUrl was needed because by default it is the location of require.js

in your case removing require.config call or changing it to

    require.config({ paths: {ace: "../lib/ace"} });

should work

cc @gjtorikian

@NodeGuy

Thank you.

Using RequireJS with ACE was too slow (perhaps because there are so many modules) so I've switched to using the SCRIPT element instead.

@NodeGuy NodeGuy closed this
@silentsnooc

Okay, here is what I got. I tried to change the theme when my page loads. This works:

<script>
    var ace_root = "scripts/lib/bower_components/ace/lib/ace/";

    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: ace_root
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme(ace_root + "theme/tomorrow_night_bright");
        editor.getSession().setMode(ace_root + "mode/assembly_x86");
    });
</script>

but this does not work:

<script>
    var ace_root = "scripts/lib/bower_components/ace/lib/ace";

    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: ace_root
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme(ace_root + "/theme/tomorrow_night_bright");
        editor.getSession().setMode(ace_root + "/mode/assembly_x86");
    });
</script>

The difference is if I put / to ace_root (working) or not (not working). I don't know if that's intended or what the reason is but I thought I mention that here. Get the full HTML document I used here.

Browser: Firefox 41.0.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.