Ace-custom-element NPM

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.