Design

Code

Default

If no controlset is set the default will be controlset of full


                                                <textarea class="ace-editor" id="defaultset">
                                                </textarea>

Basic editor


                                                <textarea class="ace-editor" data-ace-editor-controlset="basic" id="basicset">
                                                </textarea>

Basic editor - max height

The editor is design to auto grow based on the size of the content inside.

The max height is the maximum height the editor will grow when content is added.


                                                <textarea class="ace-editor" data-ace-editor-controlset="basic" data-ace-maxheight="600" id="basicsetmax">
                                                </textarea>

Basic editor - disabled


                                                <textarea class="ace-editor" data-ace-editor-controlset="basic" id="basicsetdisabled" disabled="disabled">
                                                </textarea>

Full editor


                                                <textarea class="ace-editor" data-ace-editor-controlset="full" id="fullset">
                                                </textarea>

Event binding


                                                <textarea class="ace-editor" id="defaultsetevents">
                                                </textarea>

Setting a language

The editor by default will use the language set on the HTML element. If the language is not set it will default to English.


                                                <textarea class="ace-editor" data-ace-language="zh-Hant" id="languagesetzh">
                                                </textarea>

Javascript methods

Function Arguments Description Example
init Object with properties:

  • skinPath
  • language
 Bind all the events to editor.

  • skinPath (optional string) - sets the path to editor skin files
  • language (optional string) - sets the language of all editor controls.

Available languages: de, en (default), es, fr, it, ja, ko, nl, pt-br, ru, zh, zh-cn.

 
ACE.Editor.init({ skinPath: 'dist/extensions/editorskin' });
destroy elementSelector Removes the event bindings. 
ACE.Editor.destroy();
getValue elementSelector get the value programmatically. 
ACE.Editor.getValue('#editor1');
setValue elementSelector, value Sets value programmatically. 
ACE.Editor.setValue('#editor1','hello world');

Javascript events

Event Arguments Description Example
ace-editor-change data Edtior value changed 
document.getElementById('defaultsetevents').addEventListener('ace-editor-change', function (data) { console.log(data); }, false);

Files

Name Required Description Example
extensions/ace-editor-with-dependencies.js Yes Core editor framework 
<script src="dist/extensions/ace-editor-with-dependencies.js"></script>
extensions/editorskin/ace/contents.css Yes Content styles, This is pulled in automatically by editor
extensions/editorskin/ace/dialog.css Yes Dialog styles, This is pulled in automatically by editor
extensions/editorskin/ace/editor.css Yes control styles, This is pulled in automatically by editor
extensions/editorskin/ace/skin.js Yes skin config file, This is pulled in automatically by editor