form.item里嵌一个form_分享一个基于codeMirror封装的Json编辑器

前言

这两天有个小需求，就是通过页面导入json数据来完成具体格式数据的存储，页面需要具备一个简单的Json编辑校验的功能。

原本也利用codeMirror做过代码编辑器，今天基于度娘的指导，简单封装一个vue Json编辑器组件，文中的案例代码可以直接拿过去，开箱即用。

本篇公号主要包含以下几个方面的内容：

• 1. codeMirror概述

• 2. Json编辑器封装

• 3. 应用demo

废话不多说，干货分享，大佬绕道。

一、 codeMirror概述

CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有实现更高级编辑功能的多种语言模式和附加组件。

官网地址：https://codemirror.net/

感兴趣的朋友可以直接上官网去撸，成熟而强大！

二、Json编辑器封装

上才艺：

• 1. 安装

npm install vue-codemirror --save
npm install jsonlint --save  #jsonlint 用于json校验报错提示

安装过程中的出现的两个小问题记录：

• 1.在使用npm install下载依赖的时候报错Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree

网上解释的原因有两种：
  原因一：新版本nodejs与npm最新版本出现不兼容
  处理方式：给npm降级   npm install -g npm@5.4.0
  原因二：网络环境不好，npm装不上。这个时候，你需要删除掉项目中的node_modules，然后重新安装。
我遇到的就是第二种情况。

• 2.类似这种：Module not found: Error: Can't resolve 'system' in '/Users/IdeaProjects/**/node_modules/jsonlint /lib'

 npm i system --save   #缺啥补啥，上文是缺“system”，那这里就补system

• 2. 封装组件-JsonEditor

完整的Json编辑器组件代码与部分注释如下：

<div class="json-editor"><textarea ref="textarea" />div>
</template>

直接复制过去，就能用。

三、应用demo

在你需要的页面进行组件的加载即可；简单提一句就是，可以加事件，例如下文中的@input事件，我用它来实时的监控输入的数据是否是标准的的json，好直接进行对象间的传值。

 <el-form ref="addDataByJSONData" ><el-form-item label="输入JSON:"><json-editor ref="jsonEditor" v-model="addDataByJSONData.JSONValue" @input="transferJsonData"/>el-form-item>el-form>
</el-row>
.....

效果图：

总结

今天的不开心就止于此吧，明天依旧光芒万丈啊～

于千万人之中遇见你所遇见的人，在时间的无涯的荒漠里，没有早一步也没有晚一步的遇上了，那也没有别的话可说，惟有轻轻的问一句：你也在这里吗？选择自己所爱的，爱自己所选择的。一直觉得，等待是一种美好的状态，因为它包含了无数的可能性。我们年龄渐长，愈来愈是觉得钱之可贵，就可能用钱去衡量一切，甚至衡量爱情。

喜欢的朋友，记得点赞?➕关注