ace-widget #
Even more embeddable code editor
Custom Element - just one tag, and no JS needed to provide
Ace - The High Performance Code EditorOriginally 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
- 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
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
placeholder
| String | `` | A placeholder text to show when the editor is emptyProperties
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