5

I am trying to embed ace code editor in my project. I am initializing my code editor with following code and now I want to enable emmet js features. I can see the ext-emmet.js extension is already their in the src directory of ace.js pre-packaged version

I need help in enabling emmet extension features. So here is my initialization code.

  var e = ace.edit("editorId"); // id of the code editor div 
  e.setTheme("ace/theme/monokai");
  e.getSession().setMode("ace/mode/html");
  e.setBehavioursEnabled(true);
  e.getSession().setTabSize(2);

Obviously I am adding the ace.js on top of the page. I can provide more details if needed.

a user
  • 23,300
  • 6
  • 58
  • 90
ʞɹᴉʞ ǝʌɐp
  • 5,350
  • 8
  • 39
  • 65

1 Answers1

5

See Lines 539-543 in ace demo.

Basically you need to load emmet source script (e.g. from https://github.com/nightwing/emmet-core/blob/master/emmet.js) and ace extension from /src/ext-emmet.js call require("ace/ext/emmet"); so that requirejs executes the script
And after that call editor.setOption("enableEmmet", true);.
See jsbin.com/ace-emmet/1/edit for live demo.

Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80
a user
  • 23,300
  • 6
  • 58
  • 90
  • 3
    I have tried adding both extension and emmet.js and after setting the option to true as you mentioned, nothing happened. I have added ace.js, ext-emmet.js and emmet.js from your link in my html page header and have made sure that they are loading. It does not even throw any error. I think there is more to it. – ʞɹᴉʞ ǝʌɐp Jul 12 '13 at 09:01
  • 1
    please see http://jsbin.com/ace-emmet/1/edit you need to add `require("ace/ext/emmet");` so that requirejs executes the script – a user Jul 13 '13 at 20:53
  • 1
    Yes Thanks. It works. I have just edited your answer above and the example provided by you. – ʞɹᴉʞ ǝʌɐp Jul 14 '13 at 12:11