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>
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
I hacked it by putting window.define = ace.define;
in my DOMload handler.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With