vue-easy-codeeditor

Project setup

yarn add vue-easy-codeeditor
npm install vue-easy-codeeditor --save

component use

global components

//main.js

import CodeEditor from 'vue-easy-codeeditor'
import 'vue-easy-codeeditor/lib/jsEditor.css'
Vue.use(CodeEditor)
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

local component

//xxx.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getModel">获取model绑定值</button>
    <button @click="updateModel">更新model绑定值</button>
    <code-editor v-model="code" mode="application/json"></code-editor>
  </div>
</template>
<script>
import CodeEditor from 'vue-easy-codeeditor'
import 'vue-easy-codeeditor/lib/jsEditor.css'
export default {
  components:{
    CodeEditor
  },
  data(){
    return {
      json:false,
      code:'function test() {\n  console.log("Hello World");\n  var a = 1;\n  var b = 2;\n  var c = a + b;\n}\n'
    }
  },
  methods:{
    getModel(){
      console.log(this.code)
    },
    updateModel(){
      this.code = '//hellow world'
    },
  },
}
</script>

Project build

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Customize configuration

See Configuration Reference.