4

We have a large javascript application that is entirely namespaced. We use require.js to load everything (require lives on the namespace) We then use grunt to compile the 100+/- js files, including libraries into one minified file.

I am able to load ace.js with 

define(['ace/ace'], function (ace) {....

I am able to create an editor such as 

var editor = ace.edit("editor");

I am not sure however to load the mode and theme. When I try something like..

editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

The request tries to find the file at the web root. 

mysite.com/theme-monokai.js

However those files need to be compiled with the rest and put into the one big minified file.

I imagine I need to include the theme and mode in my define statement, however I have tried that, and while I can get at a theme object such as

define(['ace/mode-javascript'], function (mode_js) {
console.log('mode loaded just fine')
console.log(mode_js)
...

However I don't have any luck trying to pass the object into the setTheme and setMode functions.

editor.setTheme(ace_theme);
editor.getSession().setMode(mode_js);

The end result of all of this is that I have a ace editor working but no highlighting or theme. Line numbering works, tabbing works. I am not sure if these things are in the main ace.js or if it is successfully loading its dependencies and just not able to load or not able to map the theme/mode paths to how they are loaded.

Is there a way to set the theme and mode defaults with a config? this may help. Does anyone have any idea what I am missing?

Thanks.

vittore
  • 17,449
  • 6
  • 44
  • 82
user1768699
  • 1,041
  • 9
  • 8

1 Answers1

0

The folder/file structure for the ace.js build I had was like this

/ace/ace.js
/ace/mode-javascript.js
/ace/theme-textmate.js
etc
etc

The problem is that ace expects the magic path ('ace/theme/textmate') What I needed was for require to get the correct reference to the file (the real file) and have the correct reference for ace ('ace/theme/textmate') once it was all minified and combined into one file.

The solution was to

  1. Change the folder / file name structure to mimic what was expected. So I made a folder called mode under the /ace directory. I renamed mode-javascript.js to javascript.js and placed it in the new mode folder.

  2. I added this file to the define() call in my project so that it would be picked up as needing to be added into the combined file.

    define(['ace/ace', 'ace/mode/javascript'], function (ace, ace_mode) {....

  3. I do nothing with ace_mode after this, but I needed it to be seen by requirjs in order to have it added to the combined file.

  4. After this I use the magic string just like the ace site says to

    editor.getSession().setMode("ace/mode/javascript");

I did the same thing for themes. So far it looks like its working. I have themes, syntax highlighting, code folding, etc etc working.

One other thing to mention. As I stated our project is name space CXX and require lives on that name space. Ace looks for require on window or its own name space "ace" neither of these were what I wanted so I deleted the code at the bottom of the ace file that attempts to initiate ace itself and assign it to a global var. By removing this, my define call is able to load ace like a mostly proper AMD module. mostly.

user1768699
  • 1,041
  • 9
  • 8