Socket
Socket
Sign inDemoInstall

ace-custom-element

Package Overview
Dependencies
0
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ace-custom-element

Custom element wrapper for the ace editor (https://ace.c9.io/)


Version published
Maintainers
1
Weekly downloads
495
decreased by-24.66%

Weekly downloads

Readme

Source

Ace Custom Element

npm version Published on webcomponents.org

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

PropertyAttributeTypeDefault valueDescription
editor-Ace.Editor-A reference to the ace editor.
valuevaluestring""Editor text value.
modemodestringace/mode/javascriptEditor mode.
themethemestringace/theme/eclipseEditor theme.
tabSizetab-sizenumber2Editor tab size.
readonlyreadonlybooleanfalsePlaces editor in readonly mode.
softTabssoft-tabsbooleanfalseSets editor to use soft tabs.
wrapwrapbooleanfalseSets editor to wrap text.
wrapwrapbooleanfalseSets editor to wrap text.
valueUpdateModevalue-update-mode"start", "end", or "select""select"Specifies the selection behavior after the value has been updated.
hideGutterhide-gutterbooleanfalseHides the editor gutter.
hideGutterLineHighlighthide-gutter-line-highlightbooleanfalseHides gutter highlight for the current line.
hidePrintMarginhide-print-marginbooleanfalseHides the print margin (vertical ruler).
basePathbase-pathstringace/ folder relative to module import path.Specifies the location to load additional ACE resources.

Supported events

EventDescription
changeTriggered when the editor's value changes (will trigger for each keystroke).
readyTriggered after the ace editor has been initialized.
blurTriggered when the editor loses focus.

Keywords

FAQs

Last updated on 26 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc