vue-codemirror简单模拟高德API实时编译效果

本文链接：https://blog.csdn.net/lethe0624/article/details/113864778

准备

vue
nodeJs

基本实现步骤

安装代码编辑器 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' // 这js模式必须引入的

使用

 <codemirror
   ref="myCmGenerate"
   class="code-mirror"
   v-model="htmlcontent"
   :options="cmOptions"
   @changes="changes"
   @ready="onCmReady"
   @focus="onCmFocus"
   @input="onCmCodeChange"
   @scroll="onScrollFn"
 >
 </codemirror>

export default {
  name: "CodeMirror",
  components: {
    codemirror,
  },
   data() {
    return {
      // 内部真实的内容
      htmlcontent: "",
      cmOptions: {
        tabSize: 2, //制表符的宽度。默认为4。
        indentUnit: 4, //用于覆盖缩进发生单位的方面。应该是一个完全由空格或全部由制表符组成的字符串。如果未设置，则默认为2个空格
        mode:'javascript', //运行代码类型
        //mode: { name: "javascript", json: true },
        theme: "material", // 主题 material
        line: true,
        lineNumbers: true, // 显示行号
      },
    };
  },
}

问题

如何设置主题？

答：引用相应的主题Css文件，并在配置中设置指定项 theme: “material”, // 主题 material

import 'codemirror/theme/ayu-dark.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/monokai.css'
import "codemirror/theme/material.css";

 theme: "material",//material主题

如何设置代码编译类型？

答：引用相应的js文件，并在配置中设置指定项 mode .例如 mode: “javascript”

import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/markdown/markdown.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/r/r.js";
import "codemirror/mode/shell/shell.js";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/swift/swift.js";
import "codemirror/mode/vue/vue.js";

mode: 'application/json'

如何获取编辑器对象调用方法？

答：编辑器组件上加上ref，通过ref获取。这个可以放到vue的computed里面，代码如下:

  mounted() {
    this.CodeMirrorEditor = this.$refs.myCmGenerate.codemirror;
    //var code = this.$refs.myCmGenerate.codemirror.getValue(); //编辑器中的code
  },

怎么设置编辑器高度自适应？
编辑器默认高度是300px，重新设置高度就可以了，官网给出的例子是

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
 height: auto;
 overflow-y: hidden;
 overflow-x: auto;
}

我自己解决方式是在编辑器上套了一层div（class=codemirror)，设置div的高度并设置编辑器高度auto

.codemirror-container{
   overflow-y: scroll!important;
   height: 99.8%;
   background-color: khaki;
}
.CodeMirror {
 height: auto !important;
}

效果图

在这里插入图片描述

示例代码可以在 GitHub 里可以下载：https://gitee.com/Y7ethe/codemirror_dome

帮助

codemirror官网链接: link.