Fork me on GitHub

General

List of modules

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.

BSD License.