codemirror使用记录

一、背景

由于项目需要用到 json 编辑功能，尝试使用过 v-jsoneditor, vue-json-editor 和 vue-codemirror, 使用都不尽人意，一番尝试之后，用 codemirror 成功满足需求，小记录一下。

二、codemirror介绍

CodeMirror 是使用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有实现更高级编辑功能的多种语言模式 (language mode)和附加组件(addon)。
CodeMirror 具有丰富的 API 和 CSS 主题系统，方便用户为其应用程序作定制化，并且易于扩展。本文主要聚焦于在 vue 工程中 json 的编辑功能。

三、codemirror使用

1. 所需依赖

npm install --save codemirror
npm install --save jsonlint

没有使用 vue-codemirror，直接在 vue 中使用 codemirror 。
此外，需要安装一个开发依赖 script-loader，方便引入 jsonlint。

npm install --save-dev script-loader

我安装的版本如下：

"codemirror": "^5.59.2",
"jsonlint": "^1.6.3",
"script-loader": "^0.7.2",

2. JsonEditor 组件

直接封装好 JsonEditor 组件，在 src/components 新建 JsonEditor.vue 文件，如下

直接上代码