JS-juicy-ace-editor-PROSAGA-码农传奇

Even more embeddable code editor.
Custom Element - just one tag, and no JS needed to provide
Ace - The High Performance Code Editor

Demo

Check it live!

Play & Configure with kitchen sink

Features

Besides Ace features, <juicy-ace-editor> does:

provide extremely clean and easy way to embed it (see Usage)
observe DOM changes:
- Update your code by just updating Element’s text content
- Change Editor’s setting by changing DOM attributes
Compatible with Shadow DOM v0 and v1
Custom Elements v1 (more)

You can still fiddle with Ace editor programmatically using <juicy-ace-editor>.editor.

Install

Install the component using Bower:

$ bower install juicy-ace-editor --save

Or download as ZIP.

Usage

Import Web Components’ polyfill (if needed):

 <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

Import Custom Element:

 <link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">

Start using it!

<juicy-ace-editor theme="ace/theme/monokai">Type your code here...</juicy-ace-editor>

Attributes

Attribute	Options	Description
`theme`	String	`Editor#setTheme` at Ace API
`mode`	String	`EditSession#setMode` at Ace API
`fontsize`	String	`Editor#setFontSize` at Ace API
`softtabs`	Boolean	`EditSession#setUseSoftTabs()` at Ace API
`tabsize`	Boolean	`Session#setTabSize()` at Ace API
`readonly`	Boolean	`Editor#setReadOnly()` at Ace API
`wrapmode`	Boolean	`Session#setWrapMode()` at Ace API
`max-lines`	Number	`renderer#$maxLines` at used to for autoresizing
`min-lines`	Number	`renderer#$minLines` at used to for [autoresizing](https://ace.c9.io/demo/autoresize.html
`shadow-style`	String	CSS selector for a `<style>` element, from the same (shadow)tree, to be injected to shadow root when stamped or attributeChanged

Properties

Name	Description
`editor`	Ace editor object.
`value`	editor.get-/setValue()

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

bower install --save document-register-element

Demo

Features

Install

Usage

Attributes

Properties

Events

Web Components v0 vs v1

Who uses it?

Contributing and Development

History

License