<ace-editor> Polymer (ES6)

Wrapper of Ace Editor as a customizable Polymer 1.0 WebComponent in ES6 syntax.

Why

Just...

<link rel="import" href="[your_bower_folder]/polymer-ace-editor/ace-editor.html">

<ace-editor></ace-editor>

ready to go! 🚀

Forget to import any library, just import the component and polifylls if needed (webcomponentsjs just for Polymer) and you are ready to go.
Versatility also for all the methods of Ace: you can access directly the Ace instance with this.Ace or simply use the methods of the component itself.

Install

$ bower install polymer-ace-editor

Default Properties

{
  /** Ace istance **/
  Ace: {
    type: Function,
  },
  version: {
    type: String,
    value: '1.2.5'
  },
  mode: {
    type: String,
    value: 'html',
  },
  theme: {
    type: String,
    value: 'monokai',
  }
}

Note about version and library load

The property version is defined to load the version of the library that you need from the CloudFlare CDN.
The default version is set to 1.2.5

If two or more instances of the component are attached in the same page, only the first one will load the library, so this means that you can specify the version only on the first instance of the component.
Example:

<!-- Only the first one will load the lib -->
<ace-editor></ace-editor>
<!-- So the property "version" is pointless here -->
<ace-editor version="1.2.3"></ace-editor>

Note about detaching

Is good to know that once a <ace-editor element is detached it removes also the library from the DOM. Of course the other instances of the component (if there are) attached will work anyway.

API

.setTheme(theme)

theme

Type: string
Set the name of the theme live-time (ref: test mode)

---

.setMode(mode)

mode

Type: string
Set the mode live-time (ref: test themes)

---

.getContent()

Return type: string
String with the content (also the HTML) currently within the editor

---

.setContent(content)

content

Type: string
Content will override the current content of the editor. The content needs to be passed as string

---

.appendContent(content)

content

Type: string
Content will be appended after the current content of the editor. The content needs to be passed as string

---

Events

ref: Events section

on-ace-ready

After the correct initialization of the library and the component

on-change

Ace => Editor.on('change')

on-blur

Ace => Editor.on('blur')

on-change-selection-style

Ace => Editor.on('changeSelectionStyle')

on-change-selection-style

Ace => Editor.on('changeSelectionStyle')

on-change-session

Ace => Editor.on('changeSession')

on-copy

Ace => Editor.on('copy')

on-focus

Ace => Editor.on('focus')

on-paste

Ace => Editor.on('paste')

Ace instance

You can also get the Ace instance and make your own methods. The property this.Ace is directly referenced to window.ace so you can, of course, call every method of Ace.

Ref: Ace API

Other references

polymer-lib-loader - for loading the library

Develop

Clone the repository inside a folder (ex: sandbox-ace-editor/ace-editor) and inside the ace-editor folder:

$ npm install && bower install

Developing mode: watch on base files and Babel that transpiles (http://localhost:8080/ace-editor/demo)

$ npm start

Build: only the Babel action simply run

$ npm run build

Test

Standard for coding style and WCT for unit test:

$ npm test

License

MIT © LasaleFamine