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 文件，如下

直接上代码

其中，需要注意的是代码主题样式可以根据自己的喜好去官网选择，并引入相应的 css 文件即可，我选择的是 rubyblue 这个主题

还有个坑就是当编辑器隐藏和显示时，容易出现样式错乱

解决方法是将 autoRefresh 设为 true，并且加上 refresh 函数，每次打开编辑器时刷新一下编辑器，具体可以参考一下这篇文章 https://www.cnblogs.com/wenru...。

3. 使用

使用起来很方便，需要的地方直接引入 JsonEditor 组件，直接上代码

这样就可以愉快地编写 json 代码了

也会提示格式错误。如果输入的 json 是需要提交的，可以通过 JSON.parse 来进行校验，阻止提交

// ...
// 判断表达式是否符合要求
if (this.json) {
  try {
    JSON.parse(this.json)
  } catch (e) {
    this.$message.warning('请输入正确的 json')
    return
  }
}
// ...

CodeMirror 功能非常强大，如代码自动补全、代码折叠、绑定 vim 和 设置快捷键等功能，可以官网上查找，本文只记录了笔者所用到的一些简单的功能。