https://github.com/socsieng/ace-custom-element
Custom element wrapper for the ace editor (https://ace.c9.io/)
https://github.com/socsieng/ace-custom-element
ace ace-editor custom-element web-component
Last synced: 3 months ago
JSON representation
Custom element wrapper for the ace editor (https://ace.c9.io/)
- Host: GitHub
- URL: https://github.com/socsieng/ace-custom-element
- Owner: socsieng
- License: apache-2.0
- Created: 2020-07-30T17:23:33.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-04-24T18:24:41.000Z (about 3 years ago)
- Last Synced: 2025-09-23T05:58:20.150Z (9 months ago)
- Topics: ace, ace-editor, custom-element, web-component
- Language: TypeScript
- Homepage:
- Size: 576 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Ace Custom Element
[](https://www.npmjs.com/package/ace-custom-element)
[](https://www.webcomponents.org/element/ace-custom-element)
This is a custom element wrapper for the [Ace code editor](https://ace.c9.io/).
The primary reason for this package over other similar packages is to make it easier to use with by including a single
script resource so that it can be accessed using services like unpkg.com.
## Usage
### CDN
Using a CDN like unpkg.com:
```html
```
Try it out on [JSFiddle](https://jsfiddle.net/4ejdon81/).
### Locally
Using a local file:
```
npm install ace-custom-element
```
```html
```
## Supported properties
| Property | Attribute | Type | Default value | Description |
| :------------------------ | :--------------------------- | :-------------------------------- | :-------------------------------------------- | :----------------------------------------------------------------- |
| `editor` | - | `Ace.Editor` | - | A reference to the ace editor. |
| `value` | `value` | `string` | `""` | Editor text value. |
| `mode` | `mode` | `string` | `ace/mode/javascript` | Editor mode. |
| `theme` | `theme` | `string` | `ace/theme/eclipse` | Editor theme. |
| `tabSize` | `tab-size` | `number` | `2` | Editor tab size. |
| `readonly` | `readonly` | `boolean` | `false` | Places editor in readonly mode. |
| `softTabs` | `soft-tabs` | `boolean` | `false` | Sets editor to use soft tabs. |
| `wrap` | `wrap` | `boolean` | `false` | Sets editor to wrap text. |
| `wrap` | `wrap` | `boolean` | `false` | Sets editor to wrap text. |
| `valueUpdateMode` | `value-update-mode` | `"start"`, `"end"`, or `"select"` | `"select"` | Specifies the selection behavior after the value has been updated. |
| `hideGutter` | `hide-gutter` | `boolean` | `false` | Hides the editor gutter. |
| `hideGutterLineHighlight` | `hide-gutter-line-highlight` | `boolean` | `false` | Hides gutter highlight for the current line. |
| `hidePrintMargin` | `hide-print-margin` | `boolean` | `false` | Hides the print margin (vertical ruler). |
| `basePath` | `base-path` | `string` | `ace/` folder relative to module import path. | Specifies the location to load additional ACE resources. |
## Supported events
| Event | Description |
| -------- | ---------------------------------------------------------------------------- |
| `change` | Triggered when the editor's value changes (will trigger for each keystroke). |
| `ready` | Triggered after the ace editor has been initialized. |
| `blur` | Triggered when the editor loses focus. |