Owner's avatar

Juicy/juicy-ace-editor

Custom Element with Ace(http://ace.c9.io/) code editor

Overview

<juicy-ace-editor>

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

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

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

    <script src="//cdn.jsdelivr.net/webcomponentsjs/0.6.0/webcomponents.min.js"></script>
  2. Import Custom Element:

    <link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
  3. Start using it!

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

Attributes

Attribute Options Default 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

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.

Who uses it?

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT

Download

Download ZIP

Activity

Created 3 years ago

Last updated 13 days ago

Bower Dependencies

webcomponentsjs ~0.7.10

ace-builds ~1.2.0

Made with by a bunch of awesome contributors. Brought to you by Liferay.