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.