You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
vue2-ace-editor ====================
[![npm](https://img.shields.io/npm/v/vue2-ace-editor.svg)](https://www.npmjs.com/package/vue2-ace-editor)
A packaging of [ace](https://ace.c9.io/)
Demo here: https://github.com/chairuosen/vue-ace-editor-demo/tree/vue2
## IMPORTANT
emmet support for html is removed after 0.0.6. because its code cannot works with strict mode.
if you want to use it. require emmet by your own. ``` npm install emmet@git+https://github.com/cloud9ide/emmet-core.git#41973fcc70392864c7a469cf5dcd875b88b93d4a ```
```js require(['emmet/emmet'],function (data) { // this is huge. so require it async is better window.emmet = data.emmet; }); ```
## How to use
1. Install
``` npm install --save-dev vue2-ace-editor ``` 2. Require it in `components` of Vue options
```js { data, methods, ... components: { editor: require('vue2-ace-editor'), }, } ``` 3. Require the editor's mode/theme module in custom methods ```js { data, methods: { editorInit: function () { require('brace/ext/language_tools') //language extension prerequsite... require('brace/mode/html') require('brace/mode/javascript') //language require('brace/mode/less') require('brace/theme/chrome') require('brace/snippets/javascript') //snippet } }, } ``` 4. Use the component in template
```html <editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor> ``` prop `v-model` is required prop `lang` and `theme` is same as [ace-editor's doc](https://github.com/ajaxorg/ace) prop `height` and `width` could be one of these: `200`, `200px`, `50%` 5. Access the ACE's instance
`<editor ref='myEditor'>`
`let editor = this.$refs.myEditor.editor` or ``` editorInit: function (editor) { } ```
|