https://github.com/dhenkes/vue2-ace

NO LONGER MAINTAINED. A Vue2 component for including the ace editor
https://github.com/dhenkes/vue2-ace

ace-editor vue2

Last synced: 6 days ago
JSON representation

NO LONGER MAINTAINED. A Vue2 component for including the ace editor

• Host: GitHub
• URL: https://github.com/dhenkes/vue2-ace
• Owner: dhenkes
• License: mit
• Archived: true
• Created: 2016-10-31T10:02:30.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-19T14:26:16.000Z (over 6 years ago)
• Last Synced: 2024-09-21T09:15:20.529Z (12 days ago)
• Topics: ace-editor, vue2
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 18
• Watchers: 3
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NO LONGER MAINTAINED

Due to lack of time I can't maintain this component anymore. If someone is interested

in taking it over and going further with the development, feel free to contact me.

# vue2-ace

A Vue2 component for including the [ace editor](https://ace.c9.io/).

### Installation

```

npm install --save vue2-ace

```

### How to use

Import the component, the mode and the theme in ``.

```

import editor from 'vue2-ace'

import 'brace/mode/javascript'

import 'brace/theme/chrome'

```

Register the component in the Vue options.

```

components: {

  editor

}

```

Use the component in your `template`. Make sure to change `variable` to a string

the editor should start with (it can be an empty string too).

```

<editor :content="variable"></editor>

```

The content-prop is required, the other props have the following defaults:

```

lang: javascript

theme: chrome

height: 300px

width: 100%

sync: false

options: {}

```

If you want to change any of these defaults, just include them when you use the

component in the template.

```

<editor :content="variable" :height="'500px'"></editor>

<editor :content="variable" :width="'50%'"></editor>

<editor :content="variable" :lang="'html'"></editor>

<editor :content="variable" :theme="'github'"></editor>

<editor :content="variable" :sync="true"></editor>

<editor :content="variable" :options="options"></editor>

```

The theme can be changed after the component already has been mounted. Just

change the string of the theme-variable.

To sync the content of the editor to the original content-variable, set the

sync prop to true. Watch out: Every time the the original variable updates, the

editor will also update it's content.

If you want to use another lang or theme, don't forget to import it.

You can pass extra options like font-family or font-size using the option prop.

It is set in the component using `editor.setOptions()`.

```

data () {

  return {

    options: {

      fontSize: '12pt'

    }

  }

}

```

Last but not least listen on the `editor-update`. Make sure to replace

`vm.function` with the function you want to execute.

```

mounted () {

  var vm = this;

  vm.$on('editor-update', vm.function);

}

```