vue中使用vue-codemirror 代码编辑器

1、用途

用于前端页面编辑,展示代码,可以灵活选择语言,比如shell,sql,python,js等,可自定义主题及代码提示等,功能非常强大。

2、安装

npm install vue-codemirror --save

3、main引入

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

4、当前组件引入

import { codemirror } from 'vue-codemirror';
import 'codemirror/theme/liquibyte.css';//导入选中的theme主题,与初始化theme配置一致
import 'codemirror/addon/hint/show-hint.css';//导入自动提示核心样式

import 'codemirror/mode/sql/sql.js';//导入使用的语言语法定义文件，初始化mode配置一致
import 'codemirror/addon/edit/matchbrackets.js';
import 'codemirror/addon/hint/show-hint.js';//导入自动提示核心文件
import 'codemirror/addon/hint/sql-hint.js';//导入指定语言的提示文件

5、声明组件

components:{ 
  codemirror
},

6、使用组件

<codemirror
    ref="mycode"   
    v-model="curCode"       
    :options="cmOptions"  
    class="code">        
</codemirror>

7、data中cmOptions的配置

curCode:'',
cmOptions:{
     value:'',//编辑器的起始值。可以是字符串，也可以是文档对象。
     mode:"text/x-hive",//第一个将模式名称映射到它们的构造函数，第二个将MIME类型映射到模式规范。
     theme: "liquibyte",//编辑器样式的主题       
     indentWithTabs: true,//在缩进时，是否tabSize 应该用N个制表符替换前N *个空格。默认值为false。       
     smartIndent: true,//是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为true。         
     lineNumbers: true,//是否在编辑器左侧显示行号。        
     matchBrackets : true,//括号匹配         
     autofocus: true,//可用于使CodeMirror将焦点集中在初始化上  
     extraKeys: {"Ctrl-Space": "autocomplete"},//按键配置 
     hintOptions: {tables: {          
        users: ["name", "score", "birthDate"],      
        countries: ["name", "population", "size"] 
     }}  
},

8、示例图