Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ace editor "define is not defined"

I'm trying to add the ace editor to my app. I downloaded it from github, dropped the "ace/lib/ace" directory into my app's directory, included:

<script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>"

in my body tag and:

editor = ace.edit "editor"

in my script tag. I've tried to load the page in Chrome and Firefox and I get "define is not defined" in ace.js:46. The line in ace.js is:

define(function(require, exports, module) {

Does anyone know why ace is expecting the define() function to exist and why it's not finding it? Here's my source:

<html>
  <body>
    <div id="editor">some text</div>
    <script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var editor = ace.edit("editor");
    </script>
  </body>
</html>
like image 307
phil-hig Avatar asked Jun 04 '12 14:06

phil-hig


3 Answers

If you already have the source, then it is pretty easy to do still. Just go in the directory where you copied all the ace source.

Then, do:

npm install
node Makefile.dryice.js

See the wiki for additional details https://github.com/ajaxorg/ace/wiki/Building-ace

like image 65
Shaurav Garg Avatar answered Nov 01 '22 12:11

Shaurav Garg


I hacked it by putting window.define = ace.define; in my DOMload handler.

like image 8
ulu Avatar answered Nov 01 '22 12:11

ulu


You are getting this error because the RequireJS JavaScript library has not been included in your page.

To fix this either use an ace build or include RequireJS in your page.

If you choose to include RequireJS your html fragment will look something like this:

<!-- Editor will go here -->
<div id="editor"></div>

<!-- Load RequireJS -->
<script src="lib/requirejs/require.js"></script>

<!-- Initialize ace -->
<script>

    // Tell RequireJS where ace is located
    require.config({
        paths: {
            'ace': 'lib/ace'
        }
    });

    // Load the ace module
    require(['ace/ace'], function(ace) {
        // Set up the editor
        var editor = ace.edit('editor');
        editor.setTheme('ace/theme/monokai');
        editor.getSession().setMode('ace/mode/javascript');
        // etc...
    });
</script>
like image 5
Mark Fielbig Avatar answered Nov 01 '22 10:11

Mark Fielbig