把后端返回的json数据格式化显示在页面上，类似json.cn

最新推荐文章于 2023-11-02 11:42:26 发布

Dawn_pre

最新推荐文章于 2023-11-02 11:42:26 发布

阅读量2k

点赞数

分类专栏： study progress 文章标签： javascript css html5 reactjs css3

本文链接：https://blog.csdn.net/csdn_smartyang/article/details/108887742

版权

本文介绍了如何在React应用中实现一个功能，即点击按钮展示后端返回的JSON数据，形式如同json.cn网站。通过引入JSONEditor模块，支持多种编辑模式，并详细说明了安装和在React中的具体使用方法。

摘要由CSDN通过智能技术生成

今天老大提了一个需求，想要做一个按钮点击后出现一个类似于json.cn代码格式化,把后端返回给你的一个json数据格式化以后显示在页面上，经高人指点知道了这样一个jsoneditor模块

一.介绍

JSON编辑器是基于Web的工具，用于查看，编辑，格式化和验证JSON。它具有多种模式，例如树编辑器，代码编辑器和纯文本编辑器。

该编辑器可以用作您自己的Web应用程序中的组件。该库可以作为CommonJS模块，AMD模块或常规javascript文件加载。

支持的浏览器：Chrome，Firefox，Safari，Opera，Edge，Internet Explorer 11。

二.安装

npm install jsoneditor

可以npm安装，也可以直接引用cdn，或者下载下来再引用。

// 为了在我们的web应用中实现JSONEditor，我们需要载入css和js文件
<link href="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.js"></script>

// 获取更多详细的错误信息
<script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>

//上面提到支持多种modes，而其中的code mode比较特别，需要依赖于Ace editor, JSON Editor comes with a custom built version of Ace containing the ace modules ace.js, ext-searchbox.js, mode-json.js, theme-textmate.js, and a custom theme theme-jsoneditor.js。除了载入ace.js之外，我们还需要在js代码中设置mode，就像下面给出的实例中所示。
<script src="https://cdn.bootcss.com/js