<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
ES6 Modules version
This version was created using the ES6-modules branch of the original juicy-ace-editor repo. A Github Actions workflow was balking at using the original repo, so I merged it into my fork's master.
The rest of these instructions are very outdated.
Demo
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
- Compatible with Shadow DOM v0 and v1
- Custom Elements v1 (more)
You can still fiddle with Ace editor programmatically using <juicy-ace-editor>.editor.
Install
Install the component using Bower:
$ bower install juicy-ace-editor --saveOr download as ZIP.
Usage
-
Import Web Components' polyfill (if needed):
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-
Import Custom Element:
<link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
-
Start using it!
<juicy-ace-editor theme="ace/theme/monokai">Type your 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
|
|
tabsize |
Boolean |
Session#setTabSize() at Ace API
|
|
readonly |
Boolean |
Editor#setReadOnly() at Ace API
|
|
wrapmode |
Boolean |
Session#setWrapMode() at Ace API
|
|
shadow-style |
String | CSS selector for a <style> element, from the same (shadow)tree, to be injected to shadow root when stamped or attributeChanged |
Properties
| Name | Description |
|---|---|
editor |
Ace editor object. |
value |
editor.get-/setValue() |
Events
| Name | Description |
|---|---|
change |
Triggered when editor content gets changed |
editor-ready |
Triggered once Ace editor instance is created. |
Web Components v0 vs v1
Currently, this element supports both Shadow DOM v1 and v0, but only Custom Elements v1. If your environment uses Custom Elements v0 only, we strongly recommend to use lightweight v0 to v1 polyfill
bower install --save document-register-elementWho uses it?
- Starcounter In-memory application engine
- LEAN Theorem prover by Microsoft Research
- Polymer/polyup Polymer migration tool
- You ...?
Contributing and Development
History
For detailed changelog, check Releases.
License
MIT