antd使用codemirror编辑器(四)

0、文档

CodeMirror

1、基本步骤

安装代码编辑器 vue-codemirror

npm install vue-codemirror --save

全局引用，在main.js中添加如下代码：

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import "codemirror/addon/hint/show-hint.css";
Vue.use(codemirror)

局部引用，vue单页中引用

import {codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'  // 核心样式
import 'codemirror/mode/javascript/javascript' //引入代码运行类型

2、完整代码

<template>
  <div class="codemirror" style="width: 100%" >
    <codemirror
        ref="myCmGenerate"
        class="code-mirror"
        v-model="code"
        :options="options"
        @changes="changes"
        @ready="onCmReady"
        @focus="onCmFocus"
        @input="onCmCodeChange"
        @scroll="onScrollFn"
    >
    </codemirror>
    <br />
    <a-space>
      <a-button type="primary"  @click="handleRunCode" >在线运行</a-button>
      <a-button type="primary"  @click="handleConfirm" >点击保存</a-button>
    </a-space>
    <a-card title="代码执行结果" v-if="visible" style="width: 100%">
      <p> 人生若只如初见 {{ data }}</p>
    </a-card>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror' // 引入组件
// 核心样式
import 'codemirror/lib/codemirror.css'

// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/material.css'

//设置代码编译类型，并在配置中设置指定项 mode
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/javascript/javascript'
import {run_online} from "@/services/driver_intercept";


export default {
  name: "CodeMirror",
  data () {
    return {
      api_str:'http://localhost:7777/auth/run_online',
      data: "",
      visible:false,
      code: '', // 编辑器绑定的值,对应v-model
      // 默认配置
      options: {
        tabSize: 4, // 缩进格式
        theme: 'material', // 主题，对应主题库 JS 需要提前引入
        lineNumbers: true, // 显示行号
        line: true,        // 检查格式
        autocorrect: true,  // 自动更正
        spellcheck: true,  // 拼写检查
        mode: { // 模式, 可查看 codemirror/mode 中的所有模式,运行代码类型
          name: 'python',
          json: true
        },
        styleActiveLine: true, // 高亮选中行
        hintOptions: {
          completeSingle: true // 当匹配只有一项的时候是否自动补全
        },
        foldGutter: true,  // 可将对象折叠，与下面的gutters一起使用
        gutters: [
          "CodeMirror-lint-markers",
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter"
        ],
        //选中单词后，其他相同单词也高亮
        highlightSelectionMatches: {
          minChars: 2,
          style: "matchhighlight",
          showToken: true
        },
      }
    }
  },
  methods: {
    onCmReady() {
      this.$refs.myCmGenerate.codemirror.setSize('100%', '400px')  //editor.setSize(width,height)
    },
    onCmFocus(instance, event) {
      console.log(instance)
      console.log(event)
    },
    onCmCodeChange(instance, obj) {
      console.log(instance)
      console.log(obj)
    },
    changes() {},
    onScrollFn() {},
    handleConfirm() {},
    handleRunCode() {
      this.loading = true;
      this.visible = true;   //控制运行结果框是否展示
      console.log('result---',this.visible);
      this.CodeMirrorEditor = this.$refs.myCmGenerate.codemirror;
      const lang = "python";
      const typed_code = this.code_content = this.CodeMirrorEditor.getValue(); //获取编辑器输入值editor.getValue()
      console.log('code-----',this.code_content);
      run_online(this.api_str, {lang, typed_code})
          .then((result) => {
            this.loading = false;
            this.data = result.data.errmsg;   //跟后端接口response对齐
          })
          .catch((err) => {
            this.data = err;
          });
    }
  },
  components: {
    codemirror
  },
  mounted() {
    this.CodeMirrorEditor = this.$refs.myCmGenerate.codemirror;
    // this.code_content = this.CodeMirrorEditor.getValue();
  },

}
</script>

<style>

</style>

3、效果演示