vue-ace

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

use

<template>
    <div id="app">
        <div class="ace-editor-wrap">
            <ace-editor
                class="ace-full-screen"
                :config = "config"
                @init="init"
                @input= "aceChange"
            ></ace-editor>
        </div>
    </div>
</template>

<script>
import aceEditor from './ace-editor'
export default {
  name: 'app',
  data () {
    return {
      config: {
          width:1000,
          height:1000,
          value: '',
          autoCompletion: true,
          fullScreen: true
      }
    }
  },
  methods: {
      init ($ace) {
          console.log($ace)
      },
      aceChange (content,$ace,$fn) {
          console.log('content', content)
      },
      // **新增** 动态修改主题
      changeTheme () {
        this.config = Object.assign({}, this.config, {
            theme: 'eclipse' 
        })
      }
  },
  components: {
    'ace-editor': aceEditor
  }
}
</script>
<style lang="scss">
    @import url("./ace-editor/style.css");
    html,body {
        width: 100%;
        height: 100%;
    }
    .ace-editor-wrap {
        width: 100%;
        height: 100%;
    }
</style>

Configuration

vue-ace