@granite-elements/ace-widget

LostInBrittany's Ace (http://ace.c9.io/) widget

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@granite-elements/ace-widget
2.2.7-b14 years ago4 years agoMinified + gzip package size for @granite-elements/ace-widget in KB

Readme

Published on Vaadin  Directory Stars on vaadin.com/directory Published on webcomponents.org
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

  1. Fork the ace-widget repository and clone it locally.

  1. Make sure you have npm
and the Polymer CLI installed.
  1. When in the ace-widget directory, run npm install to install dependencies.

  1. Serve the project using Polyumer CLI:
`polymer serve --npm`
  1. 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 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

  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