博客

在开发vue项目的过程中，需要一个可以自定义规则的代码编辑器，最终选用了

Vue-Codemirror

来进行开发。

Vue-Codemirror

是基于

Codemirror

，并适用于Vue的代码编辑器。

• 
  官方文档
  
• npm
  • 
    Codemirror
    
  • 
    Vue-Codemirror
    
• 
  demo
  

功能介绍

1. 多种主题支持
2. 多种语言支持（json、yaml、xml、jsx、sql、css、c、c++等）
3. 语法校验
4. 代码折叠
5. 代码比对以及合并
6. 代码补全
7. … 等功能

Install

• npm

npm install vue-codemirror --save

引入

import 'codemirror/lib/codemirror.css'
import VueCodemirror from 'vue-codemirror';

-cdn

<link rel="stylesheet" href=".../codemirror/5.59.1/lib/codemirror.css">

<script type="text/javascript" src=".../codemirror/5.59.1/lib/codemirror.js></script>
<script type="text/javascript" src=".../vue-codemirror/4.0.6/dist/vue-codemirror.js"></script>

Mount

• global

 import Vue from 'vu