https://github.com/juicy/juicy-ace-editor

Custom Element with the Ace code editor
https://github.com/juicy/juicy-ace-editor

plain-js used-in-starcounter-app

Last synced: 11 days ago
JSON representation

Custom Element with the Ace code editor

• Host: GitHub
• URL: https://github.com/juicy/juicy-ace-editor
• Owner: Juicy
• License: mit
• Created: 2014-06-12T23:17:08.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-03-29T12:34:34.000Z (over 4 years ago)
• Last Synced: 2024-04-25T22:01:18.572Z (7 months ago)
• Topics: plain-js, used-in-starcounter-app
• Language: HTML
• Homepage: http://juicy.github.io/juicy-ace-editor/
• Size: 3.69 MB
• Stars: 94
• Watchers: 12
• Forks: 34
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <juicy-ace-editor>

> Even more embeddable code editor.

> Custom Element - just one tag, and no JS needed to provide

> [Ace](http://ace.c9.io/) - The High Performance Code Editor

## Demo

[Check it live!](http://juicy.github.io/juicy-ace-editor)

[Play & Configure with kitchen sink](http://juicy.github.io/juicy-ace-editor/kitchen-sink.html)

## Features

Besides Ace features, `` does:

 - provide extremely clean and easy way to embed it (see [Usage](#usage))

 - observe DOM changes:

  - Update your code by just updating Element's text content

  - Change Editor's setting by changing DOM [attributes](#attributes)

 - Compatible with Shadow DOM v0 and v1

 - Custom Elements v1 ([more](#web-components-v0-vs-v1))

You can still fiddle with Ace editor programmatically using `.editor`.

## Install

Install the component using [Bower](http://bower.io/):

```sh

$ bower install juicy-ace-editor --save

```

Or [download as ZIP](https://github.com/juicy/juicy-ace-editor/archive/master.zip).

## Usage

1. Import Web Components' polyfill (if needed):

    ```html

    

    ```

2. Import Custom Element:

    ```html

    

    ```

3. Start using it!

   

  ```html

  Type your code here...

  ```

## Attributes

Attribute   | Options   | Default | Description

---         | ---       | ---     | ---

`theme`     | *String*  |         | `Editor#setTheme` at [Ace API](http://ace.c9.io/#nav=api&api=editor)

`mode`      | *String*  |         | `EditSession#setMode` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)

`fontsize`  | *String*  |         | `Editor#setFontSize` at [Ace API](http://ace.c9.io/#nav=api&api=editor)

`softtabs`  | *Boolean* |         | `EditSession#setUseSoftTabs()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)

`tabsize`   | *Boolean* |         | `Session#setTabSize()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)

`readonly`  | *Boolean* |         | `Editor#setReadOnly()` at [Ace API](http://ace.c9.io/#nav=api&api=editor)

`wrapmode`  | *Boolean* |         | `Session#setWrapMode()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)

`max-lines` | *Number*  |         | `renderer#$maxLines` at used to for [autoresizing](https://ace.c9.io/demo/autoresize.html)

`min-lines` | *Number*  |         | `renderer#$minLines` at used to for [autoresizing](https://ace.c9.io/demo/autoresize.html

`shadow-style` | *String* |      | CSS selector for a `` element, from the same (shadow)tree, to be injected to shadow root when stamped or attributeChanged

## Properties

Name        |  Description

---         | ---

`editor`    | Ace [editor](http://ace.c9.io/#nav=api&api=editor) object.

`value`     | [editor.get-/setValue()](http://ace.c9.io/#nav=api&api=editor)

## Events

Name           |  Description

---            | ---

`change`       | Triggered when editor content gets changed

`editor-ready` | Triggered once Ace editor instance is created.

## Web Components v0 vs v1

Currently, this element supports both Shadow DOM v1 and v0, but only Custom Elements v1.

If your environment uses Custom Elements v0 only, we strongly recommend to use lightweight v0 to v1 [polyfill](https://github.com/WebReflection/document-register-element)

```sh

bower install --save document-register-element

```

## Who uses it?

- [**Starcounter** In-memory application engine](http://starcounter.com/)

- [**LEAN** Theorem prover by Microsoft Research](https://leanprover.github.io/)

- [**Polymer/polyup** Polymer migration tool](http://polymerlabs.github.io/polyup/)

- [**You** ...?](https://github.com/Juicy/juicy-ace-editor/edit/master/README.md#L107)

## [Contributing and Development](CONTRIBUTING.md)

## History

For detailed changelog, check [Releases](https://github.com/PuppetJs/redirect/releases).

## License

MIT