JSON编辑器

今天推荐一款Web前端好用的JSON编辑器，适用于 Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11主流浏览器，并且可以使用Javascript、Vue、React开发。

支持功能：

• JSON编辑
• JSON格式化
• 树形结构
• 收起展开
• 搜索
• 上一步和下一步
• 对齐文本
• 复制粘贴
• 显示行号

JSON Editor简介

JSON Editor仓库地址，拥有9.7k+的 star。

在线JSON解析工具就是使用了JSON Editor的功能。

官方介绍：

JSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor.

The editor can be used as a component in your own web application. The library can be loaded as CommonJS module, AMD module, or as a regular javascript file.

Supported browsers: Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11.

svelte-jsoneditor简介

svelte-jsoneditor是JSON Editor项目的继承者，可以直接使用。

svelte-jsoneditor仓库地址

官方介绍：

A web-based tool to view, edit, format, transform, and validate JSON

The library is written with Svelte, but can be used in any framework (React, Vue, Angular, plain JavaScript)

集成使用

先看一下效果图：

code模式：

树形模式：

安装依赖

npm install svelte-jsoneditor

代码示例

下面是Vue代码实现，其他框架可以查看官网文档。

<template>
  <div class="login">
    <div style="width: 40%; height: 50%; margin: 0 auto" ref="editor"></div>
  </div>
</template>

<script>
// 引入组件
import {JSONEditor} from "svelte-jsoneditor";
export default {
mounted() {
	let manifest = `{
	  "platformId": "",
	  "supports": [
	    "android",
	    "ios"
	  ],
	  "statusbar": {
	    "immersed": true,
	    "style": "light"
	  }
	}`
	// 将json字符串转成对象
    manifest = JSON.parse(manifest);
    // 设置content
    let content = {
      text: undefined,
      json: manifest
    }
    // 创建对象
    this.editor = new JSONEditor({
      target: this.$refs["editor"],
      props: { // 设置属性
        content: content,
        mode: "code",
        mainMenuBar: true,
        navigationBar: true,
        indentation: 4,
        tabSize: 4,
        escapeControlCharacters: false,
        onChange: (updatedContent, previousContent, patchResult) => {
          console.log('onChange', updatedContent, previousContent, patchResult)
          content = updatedContent
        }
      }
    });
  },
  beforeUnmount() {
  	// 销毁对象，释放内存
    this.editor.destroy();
    this.editor = null;
  }
}
</script>

<style lang="less" scoped>
/*去除右侧外链文字*/
/deep/ .jse-powered-by.svelte-1yyupsl {
  display: none;
}
</style>

参数属性

svelte-jsoneditor提供了很多的属性和方法可以对编辑器进行配置：

这里只截图一部分，其他部分还需要去官网查看。

使用技巧

如果想要对编辑器样式进行定制，需要F12进入调试模式，然后找到相应的样式进行改造。
例如：需要去掉工具栏右侧的外链。

在Vue代码的样式中需要重写它的class：

<style lang="less" scoped>
/*去除右侧外链文字*/
/deep/ .jse-powered-by.svelte-1yyupsl {
  display: none;
}
</style>

今天的分享就到这里，希望能够帮助大家，JSON Editor的其他功能还需要大家去研究探索。