在vue中使用codemirror编辑器

在vue中使用codemirror编辑器，其中一种方法如下，比较容易上手

第一步：安装vue-codemirror

npm install vue-codemirror --save

第二步：引入（本文使用的是在组件局部引入）
第三步：在组件中声明

<template>
	<div>
		<codemirror v-model="code" :options="options"></codemirror>
	</div>
</template>

<script>
import {
    
     codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/rubyblue.css'
import 'codemirror/mode/python/python.js'

export default {
    
    
  data () {
    
    
    return {
    
    
       code: '', // 编辑器绑定的值
		// 默认配置
		 options: {
    
    
		   tabSize: 2, // 缩进格式
		   theme: 'rubyblue', // 主题，对应主题库 JS 需要提前引入
		   lineNumbers: true, // 显示行号
		   line: true,
		   styleActiveLine: true, // 高亮选中行
		   hintOptions: {
    
    
		     completeSingle: true // 当匹配只有一项的时候是否自动补全
		   }
		 }
	 }
  },
  components: {
    
    
    codemirror
  }
}
</script>

实现效果图如下