ace-widget

Even more embeddable code editor Custom Element - just one tag, and no JS needed to provide Ace - The High Performance Code Editor

Based on pjako's fork of PolymerLabs ace-element.

Polymer 1.2 ready

Install

Install the component using Bower:

$ bower install LostInBrittany/ace-widget --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill (if needed):

   <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/ace-widget/ace-widget.html">

3. Start using it!

   <ace-widget>Editable code here</ace-widget>

Attributes

Attribute	Options	Default	Description
theme	String	``	Editor#setTheme at Ace API
mode	String	``	EditSession#setMode at Ace API
font-size	String	``	Editor#setFontSize at Ace API
softtabs	Boolean	``	EditSession#setUseSoftTabs() at Ace API
tab-size	Boolean	``	Session#setTabSize() at Ace API
readonly	Boolean	``	Editor#setReadOnly() at Ace API
wrap	Boolean	``	Session#setWrapMode() at Ace API
autoComplete	Object	``	Callback for langTools.addCompleter like the example at Ace API
minlines	Number	15	Editor.setOptions({minlines: minlines})
maxlines	Number	30	Editor.setOptions({minlines: maxlines})
initialFocus	Boolean	``	If true, Editor.focus() is called upon initialisation

Properties

Name	Description
editor	Ace editor object.
value	editor.get-/setValue()

Events

Name	Description
editor-content	Triggered when editor content gets changed
editor-ready	Triggered once Ace editor instance is created.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License