The AceEditor component

The AceEditor component wraps the Ace code editor. The component looks like this (using the default monokai theme):

The editor implements IControl<String>, and the value of the editor is the code to be edited.

Using the editor

The editor loads the Ace editor's javascript from a CDN (https://cdnjs.cloudflare.com/ajax/libs/ace/{version}/xxx). This allows easy caching and deployment. To add the required parts as HeaderContributors to a page there are two methods:

• If the editor is used on a page immediately then the editor itself registers the header contributors.
• If it is dynamically added to a page you need to call AceEditor.initialize(UrlPage) to get the contributors to register in your main page's createContent.

The Ace editor requires a size to be set using setWidth(String) and setHeight(String), or the thing does not really show.

The setTheme(String) method can be used to set/change the editor's theme, like: editor.setTheme("/ace/theme/monokai");

The setMode(String) method can be called to set the editor's mode (which language is being edited), like: editor.setMode("/ace/mode/javascript");

Available methods to play with the editor state

The following methods are implemented: