Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

ace-custom-element

Package Overview
Dependencies
0
Maintainers
1
Versions
22
Issues
File Explorer

Advanced tools

ace-custom-element

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

    1.6.5latest
    GitHub

Version published
Maintainers
1
Weekly downloads
762
decreased by-3.54%

Weekly downloads

Changelog

Source

1.6.5 (2020-09-26)

Bug Fixes

  • revert changes for bit.dev (669ff83)

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

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • 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