<juicy-ace-editor>

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

Demo

Check it live!

Play & Configure with kitchen sink

Features

Besides Ace features, <juicy-ace-editor> does:

• provide extremely clean and easy way to embed it (see Usage)
• observe DOM changes:
• Update your code by just updating Element's text content
• Change Editor's setting by changing DOM attributes

You can still fiddle with Ace editor programmatically using <juicy-ace-editor>.editor.

Install

Install the component using Bower:

$ bower install juicy-ace-editor --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill:

   <script src="//cdn.jsdelivr.net/polymer.platform/0.4.2/platform.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/juicy-ace-editor/src/juicy-ace-editor.html">

3. Start using it!

   <juicy-ace-editor>Editable code here</juicy-ace-editor>

Attributes

Attribute	Options	Default	Description
theme	String	``	Editor#setTheme at Ace API
mode	String	``	EditSession#setMode at Ace API
fontsize	String	``	Editor#setFontSize at Ace API
softtabs	Boolean	``	EditSession#setUseSoftTabs() at Ace API
readonly	Boolean	``	Editor#setReadOnly() at Ace API

Properties

Name	Description
editor	Ace editor object.

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

History

For detailed changelog, check Releases.

License

MIT License