vue-ace-editor-valid v0.1.5

vue-ace-editor-valid

ace editor for vue

Feature

• official syntax validation for 'coffee', 'css', 'html', 'javascript', 'json', 'lua', 'php', 'xml' and 'xquery'
• only use CDN source

How to use

1. add ace CDN Source to index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace.js" integrity="sha256-C7DTYRJLG+B/VEzHGeoPMw699nsTQYPAXHKXZb+q04E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/mode-json.js" integrity="sha256-WH3EjHkUnhbOt45gfu5MvEYSqvYUXE25FwAtxukgi9U=" crossorigin="anonymous"></script>

2. config CDN

// vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      ace: 'ace'
    }
  }
}

3. install vue-ace-editor-valid

$ npm install --save vue-ace-editor-valid
# or
$ yarn add vue-ace-editor-valid

4. use vue-ace-editor-valid

<template>
    <ace-editor class="editor" v-model="code" />
</template>

<script>
import AceEditor from 'vue-ace-editor-valid'
const welcome = { welcome: { ace: 'hello world' } }

export default {
  name: 'App',
  data: () => ({
    code: JSON.stringify(welcome, null, '\t')
  }),
  components: {
    AceEditor
  }
}
</script>

Documentation

Thanks

Inspired by vue2-ace-editor