json-schema-editor-vue/examples/components/Codemirror.vue

<template>
  <codemirror v-model="content" :options="cmOptions" />
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/duotone-light.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/sql/sql.js'
export default {
  components: { codemirror },
  props: {
    readOnly: {
      type: Boolean,
      default: true
    },
    mode: {
      type: String,
      default: 'text/javascript'
    },
    value: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: 'idea'
    },
    lineNumbers: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler: function (newVal) {
        this.content = newVal
      }
    },
    content: function (newVal) {
      this.$emit('input', newVal)
    }
  },
  data () {
    return {
      content: this.value,
      cmOptions: {
        tabSize: 2,
        mode: this.mode,
        theme: this.theme,
        lineNumbers: this.lineNumbers,
        readOnly: this.readOnly
      }
    }
  }
}
</script>