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:
<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. |