- Exciting release!Introducing "safe npm". Learn more →
ace-custom-element
Advanced tools
- Version published
- Maintainers
- 1
- Weekly downloads
- 762
- decreased by-3.54%
Weekly downloads
Readme
Ace Custom Element
This is a custom element wrapper for the Ace code editor.
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:
<!-- pin to a specific version if required -->
<script type="module" src="https://unpkg.com/ace-custom-element@latest/dist/index.min.js"></script>
<ace-editor theme="ace/theme/monokai" value="console.log('hello world');"></ace-editor>
Try it out on JSFiddle.
Locally
Using a local file:
npm install ace-custom-element
<script type="module" src="./node_modules/ace-custom-element/dist/index.min.js"></script>
<ace-editor theme="ace/theme/monokai" value="console.log('hello world');"></ace-editor>
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. |
FAQs
Custom element wrapper for the ace editor (https://ace.c9.io/)
The npm package ace-custom-element receives a total of 604 weekly downloads. As such, ace-custom-element popularity was classified as not popular.
We found that ace-custom-element demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.