# vue-ace-editor-compate

> vue-ace的兼容版本，主要更改index.js，自动填充，和扩展语法

Latest version **1.0.2** (published 2019-06-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-ace-editor-compate
pnpm add vue-ace-editor-compate
yarn add vue-ace-editor-compate
bun add vue-ace-editor-compate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-06-13 |
| First published | 2019-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 40.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | liuwang |
| Maintainers | liuwang |
| Keywords | vue, ace |

## Links

- npm: https://www.npmjs.com/package/vue-ace-editor-compate
- npm.io page: https://npm.io/package/vue-ace-editor-compate

## Dependencies (2)

- [brace](https://npm.io/package/brace.md) ^0.10.0
- [emmet](https://npm.io/package/emmet.md) ^1.6.3

## Recent versions

- 1.0.2 (latest) — 2019-06-13
- 1.0.1 — 2019-05-05
- 1.0.0 — 2019-05-05

## README

# vue-ace-editor-compate ![](https://img.shields.io/badge/vue-v2.0-green.svg) ![](https://img.shields.io/badge/license-GPL%20license-blue.svg)

A packaging of [ace](https://ace.c9.io/) support chinese

vue-ace的兼容版本，主要更改index.js，自动填充，和扩展语法

## How to use（如何使用）

1. Install

    ```
    npm install --save-dev vue-ace-editor-compate
    ```
    
2. Require it in `components` of Vue options（推荐使用 ES6 写法）

    ```
    import editor from "vue-ace-editor-compate";

    export default {
        data(){
              return {}
        },
        methods,
        ...
        components: { editor },
    }
    ```
 
3. Require the editor's mode/theme module in custom methods
    
    ```
    {
        data,
        methods:{
            editorInit:function () {
                require('brace/mode/html');
                require('brace/mode/javascript');
                require('brace/mode/groovy');
                require('brace/theme/chrome');
            }
        },
    }
    ```
    
4. Use the component in template（以下是两种不同方法使用）

    * Direct use of v-model binding variables;（直接使用 v-model 绑定变量）
        ```
        <editor v-model="content" @init="editorInit();" lang="html" theme="chrome" width="500" height="100"></editor>
        ```
        
        prop `v-model`  is required（v-model必须）
        
        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%`
    
    * Separate value and input separately;（分别指定input 和 value）
        ```
        <editor @init="editorInit();" lang="html" theme="chrome" width="500" height="100"
                @input="changeData" :value='editData'></editor>

        {
            data(){
              return {
                editData: editData //初始展示数据，必要时三目运算判空
              }
            },
            methods: {
              // value变化触发input执行，
              changeData: function (context) {
                this.editData = context;
              },
            }
        }
        ```
        
        prop `@input` `:value` 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%`

## License
[GPL许可证](http://www.gnu.org/licenses/gpl.html)

---
_Source: https://npm.io/package/vue-ace-editor-compate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._