Elastin 开发日记 - JSON编辑器

JSON编辑器

坑的我爬不起来的JSON编辑器
目前在使用vue-element-admin提供的json-editor，来实现JSON文本编辑功能。这个json-editor其实是vue-element-admin作者，根据codemirror + jsonlint 来实现的。

但是在使用时，发现了问题，我的要求很简单，用户打开JSON编辑器，看到的是格式化好的JSON文本数据，用户保存下次再打开时，能看到新的数据。除此之外，还有几点：

1. 用户取消编辑，那么已改动的数据不能更新

2. 用户能从外部直接改动这些JSON数据，例如某些开关可以直接变动这些JSON数据中的值

说下我的数据格式，从Django API获取的数据是Text 格式的JSON字符串，我没有用到数据库的JSON数据类型。

那么在打开JSON编辑器时，如果不做处理，会看到一横行显示的JSON文本，其中还有各种转义符号。

所以为了看到格式化的JSON文本，我把字符串转成了JSON对象，像这样：

jsonObj = JSON.parse(jsonStr)

接着，把这个json对象绑定到JSON-Editor上：

<json-editor ref="jsonEditor" :key="jsonEditorKey" v-model="jsonObj" />

这样，在打开时，将会看到已经格式化好的文本数据。直到，我编辑了JSON字符串之后，再次打开时，就成了这样：

同样还是一个对象，怎么就变成了字符串？于是我打印了类型，在编辑前，编辑后，进行监控：

console.log(typeof jsonObj)

然后发现，如果我进行了编辑，那么类型就会变成string。简直是不可思议，但是也符合常理，编辑器只能做到字符串级别的编辑。

于是我在每次JSON编辑器打开前，判断下类型，如果是string，那么就转换为JSON Object，例如这样：

if (jsonObj.constructor === String) {
   jsonObj = JSON.parse(jsonObj)
 }

问题是解决了，当然，还有很多其他类型的问题还要一个个的解决，比如：

1. 编辑器是放在Dialog里的，如果用户关闭了Dialog，并没有通过点击保存的按钮关闭，而是通过ESC按键或者是关闭按钮，我如何还原之前的值呢？
2. 如果通过表单的其他按钮更改了这个JSON对象的值，但是在重新打开JSON编辑器的时候，会发现显示的还是旧的，如何显示成新的值呢？