@granite-elements/ace-widget
v2.2.7-b1
Published
LostInBrittany's Ace (http://ace.c9.io/) widget
Downloads
1,262
Maintainers
Readme
ace-widget
Even more embeddable code editor Custom Element - just one tag, and no JS needed to provide Ace - The High Performance Code Editor
Originally based on pjako's fork of PolymerLabs ace-element.
Polymer 3.x. element The legacy Polymer 2.x version is available here
Doc and demo
https://lostinbrittany.github.io/ace-widget/
Usage example
<ace-widget placeholder="Write something... Anything..." initial-focus>
</ace-widget>
Install
Install the component using npm:
$ npm i @granite-elements/ace-widget --save
Once installed, import it in your application:
import '@granite-elements/ace-widget/ace-widget.js';
Running demos and tests in browser
Fork the
ace-widget
repository and clone it locally.Make sure you have npm and the Polymer CLI installed.
When in the
ace-widget
directory, runnpm install
to install dependencies.Serve the project using Polyumer CLI:
polymer serve --npm
Open the demo in the browser
- http://127.0.0.1:8080/components/@greanite-elements/ace-widget/demo
Attributes
Attribute | Type | Default | Description
--- | --- | --- | ---
theme
| String | | `Editor#setTheme` at [Ace API](http://ace.c9.io/#nav=api&api=editor)
`mode` | *String* |
| EditSession#setMode
at Ace API
font-size
| String | | `Editor#setFontSize` at [Ace API](http://ace.c9.io/#nav=api&api=editor)
`softtabs` | *Boolean* |
| EditSession#setUseSoftTabs()
at Ace API
tab-size
| Boolean | | `Session#setTabSize()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)
`readonly` | *Boolean* |
| Editor#setReadOnly()
at Ace API
wrap
| Boolean | | `Session#setWrapMode()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)
`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
`placeholder` | *String* |
| A placeholder text to show when the editor is empty
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D