一、概述

现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。

vue-json-editor 插件就可以实现这个功能

二、vue-json-editor 使用

安装插件

npm install vue-json-editor --save

使用

test.vue

<template><div style="width: 70%;margin-left: 30px;margin-top: 30px;"><vue-json-editorv-model="resultInfo":showBtns="false":mode="'code'"@json-change="onJsonChange"@json-save="onJsonSave"@has-error="onError"/><br><el-button type="primary" @click="checkJson">确定</el-button></div>
</template><script>// 导入模块import vueJsonEditor from 'vue-json-editor'export default {// 注册组件components: { vueJsonEditor },data() {return {hasJsonFlag:true,  // json是否验证通过// json数据resultInfo: {'employees': [{'firstName': 'Bill','lastName': 'Gates'},{'firstName': 'George','lastName': 'Bush'},{'firstName': 'Thomas','lastName': 'Carter'}]}}},mounted: function() {},methods: {onJsonChange (value) {// console.log('更改value:', value);// 实时保存this.onJsonSave(value)},onJsonSave (value) {// console.log('保存value:', value);this.resultInfo = valuethis.hasJsonFlag = true},onError(value) {// console.log("json错误了value:", value);this.hasJsonFlag = false},// 检查jsoncheckJson(){if (this.hasJsonFlag == false){// console.log("json验证失败")// this.$message.error("json验证失败")alert("json验证失败")return false} else {// console.log("json验证成功")// this.$message.success("json验证成功")alert("json验证成功")return true}},}}
</script><style>
</style>

插件参数说明：

<vue-json-editorv-model="resultInfo"  // 绑定数据resultInfo:showBtns="false"  // 是否显示保存按钮:mode="'code'"  // 默认编辑模式// 显示中文，默认英文@json-change="onJsonChange"  // 数据改变事件@json-save="onJsonSave"  // 数据保存事件@has-error="onError"  // 数据错误事件/>

访问

点击确定，提示成功

改为错误的，点击确定，会提示失败。

注意：这个json编辑会带有下来菜单，实际项目中，需要去除，比较用户误操作。

在实际使用中发现几个问题：

1. 输入中文时，传给后端的值不多

2. 输入大量json时，会有部分数据丢失。

因此，我们使用下面的编辑器bin-code-editor

三、bin-code-editor

安装模块

npm install bin-code-editor -d

引入

在 main.js 中写入2行

import CodeEditor from 'bin-code-editor';
Vue.use(CodeEditor);

test.vue

<template><div style="width: 70%;margin-left: 30px;margin-top: 30px;"><b-code-editor v-model="jsonStr" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor><br><el-button type="primary" @click="onSubumit">提交</el-button></div>
</template><script>const jsonData =`{"employees": [{"firstName": "Bill","lastName": "Gates"}, {"firstName": "George","lastName": "Bush"}, {"firstName": "Thomas","lastName": "Carter"}]}`export default {data() {return {jsonStr:jsonData}},methods: {// 检测json格式isJSON(str) {if (typeof str == 'string') {try {var obj=JSON.parse(str);if(typeof obj == 'object' && obj ){return true;}else{return false;}} catch(e) {return false;}}else if (typeof str == 'object'  && str) {return true;}},onSubumit(){if (!this.isJSON(this.jsonStr)){this.$message.error(`json格式错误`)return false}this.$message.success('json格式正确')}}}
</script><style></style>

访问测试页面，效果如下：

输入错误的值，点击执行，会有提示

vue-json-editor json编辑器相关推荐

vue 使用 Editor.md编辑器
根据该博文:https://blog.csdn.net/u010609807/article/details/82761065 github地址:https://github.com/Mozhate/ ...
JSON Editor 中文文档
JSON Editor 中文文档原文出处:https://www.cnblogs.com/handk/p/4766271.html JSON Editor JSON Editor 根据定义的JSON ...
npm 运行报错“Cannot find module ‘@vue/component-compiler-utils/package.json‘”
npm 运行报错"Cannot find module '@vue/component-compiler-utils/package.json'"如下: 解决方法:安装@vue/c ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
vue加载服务器json文件,Vue加载json文件的方法简单示例
本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): ...
vue 调取本地wps_详解VUE调用本地json的使用方法
开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况. 下面我说下我这的情况,大家依情况代 ...
vue aixos请求json
this.axios.get('/static/json/jinxiangZhe.json').then(res=>{console.log(res);}).catch( error => ...
html渲染json的插件,[ json editor] 如何在网页中使用Json editor 插件
[目的] 在自己的网页上交由用户进行json的可视化编辑 [难点]1.json中含有递归嵌套的数组和对象 2.json中的基本值类型有数字.字符串和布尔型 [方法]使用daviddurman的Flex ...
Vue 字符串转JSON
var jsonObject = JSON.parse('JSON格式字符串')
vue中实现json格式化的显示
把JSON对象转换为有缩进的 JSON字符串格式原效果图 <template><div class='content'><el-button type=" ...

vue-json-editor json编辑器