codemirror使用

1.下载codemirror

npm install vue-codemirror --save

2.main.js引入：

import VueCodeMirror from 'vue-codemirror';
Vue.use(VueCodeMirror);

3.页面使用

<template>
  <div style="width: 100%; height: 98%">
    <div style="width: 100%; margin-bottom: 10px" class="t_right">
      <el-button type="primary" @click="back">Back</el-button>
    </div>
    <codemirror
      ref="mycode"
      :value="curCode"
      :options="cmOptions"
      class="code"
      style="height: 100%"
    ></codemirror>
  </div>
</template>

<script>
import ProcessorService from '@/service/processorService';
import { codemirror } from 'vue-codemirror';
import 'codemirror/theme/ambiance.css'; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require('codemirror/mode/javascript/javascript'); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
export default {
  components: { codemirror },
  data() {
    return {
      curCode: '',
      cmOptions: {
        value: '',
        mode: 'text/javascript',
        theme: 'ambiance',
        readOnly: true
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  },
  mounted() {
    const { path } = this.$route.query;
    console.log('path---', path);
    ProcessorService.loadScript(path).then(res => {
      console.log('script---', res);
      this.curCode = res;
    });
  }
};
</script>

<style></style>