Fork me on GitHub

Ace Editor

An embeddable code editor that matches the features of native editors.


Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Ace Editor module.

YUI().use(
  'aui-ace-editor',
  function(Y) {
    // code goes here
  }
);

Using Ace Editor

Create an HTML element for the Ace Editor.

<div id="myEditor"></div>

Now create a new instance of Ace Editor with the newly created element.

YUI().use(
  'aui-ace-editor',
  function(Y) {
    new Y.AceEditor(
      {
        boundingBox: '#myEditor'
      }
    ).render();
  }
);

Configuring Ace Editor

Once a new instance of Ace Editor is created, the mode can be set to correspond to the language being typed.

YUI().use(
  'aui-ace-editor',
  function(Y) {
    new Y.AceEditor(
      {
        boundingBox: '#myEditor',
        mode: 'javascript'
      }
    ).render();
  }
);

The editor can also be set to load with content/code already written.

YUI().use(
  'aui-ace-editor',
  function(Y) {
    new Y.AceEditor(
      {
        boundingBox: '#myEditor',
        mode: 'xml',
        value: '<body id="content"></body>'
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.