README.md

Ace editor component for Ember.

• A two-way binding is set up between value and the text in the editor.
• Configure Ace in the aceInit callback.

Template

{{ace-editor value=value aceInit=aceInit class="editor"}}

Controller

App.MyController = Ember.ObjectController.extend({
  value: "Text to be manipulated with the Ace editor."
  aceInit: function(editor) {
    editor.setHighlightActiveLine(false);
    editor.setShowPrintMargin(false);
    editor.getSession().setTabSize(2);
    editor.getSession().setMode("ace/mode/javascript");
  }
});

---

Remember that, as usual with Ace, you must set css width and height on the element for it to be displayed. You can add class and id to the element as usual, as shown in the example template above.

ace-editor-component.js

App.AceEditorComponent = Ember.Component.extend({
  didInsertElement: function() {
    this.editor = window.ace.edit(this.get('element'));
    this.get('aceInit')(this.editor);
    this.editor.on('change', function(){
      this.set('value', this.editor.getSession().getValue());
    }.bind(this));
  },
  valueChanged: function () {
    if (!this.get('value'))
      this.editor.getSession().setValue('');
    else if (this.editor.getSession().getValue() !== this.get('value'))
      this.editor.getSession().setValue(this.get('value'));
  }.observes('value')
});