vue-codemirror 文本框写Js

1.首先安装

vue-codemirror 

https://www.npmjs.com/package/vue-codemirror

2.下面是自己写的例子

<template>
  <div>
    <div class="codemirror">
      <codemirror
        ref="myCm"
        v-model="formData.functionScript"
        :options="cmOptions"
        @ready="onCmReady"
        @focus="onCmFocus"
        @input="onCmCodeChange"
      ></codemirror>
    </div>
  </div>
</template>
<script>
// language js
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/addon/hint/javascript-hint.js'
import "codemirror/lib/codemirror.js"
import 'codemirror/addon/hint/show-hint.js'

import 'codemirror/theme/solarized.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// closebrackets
import 'codemirror/addon/edit/closebrackets.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/emacs.js'
export default {
  data () {
    return {
      formData: {
        functionScript:''
      },
      cmOptions: {
        tabSize: 4,  // tab字符的宽度，默认为4 
        styleActiveLine: true,  // 当前行背景高亮
        lineNumbers: true,  // 显示行数
        line: true,
        mode: 'text/javascript',  // js语法
        theme: 'solarized light'
      }
    }
  },
  computed: {
    codemirror () {
      return this.$refs.myCm.codemirror
    }
  },
  methods: {
    showJS (val) {
      this.formData.functionScript = val ? val : ''
    },
    onCmReady (cm) {
      // console.log('the editor is readied!', cm)
      this.codemirror.setSize("-webkit-fill-available", "auto")
    },
    onCmFocus (cm) {
      // console.log('the editor is focus!', cm)
    },
    onCmCodeChange (newCode) {
      console.log('this is new code', newCode)
      this.formData.functionScript = newCode
      this.$emit('codeChange', this.formData.functionScript)
    }
  }
}
</script>
<style>
</style>