在前端开发中，经常会需要对 JSON 数据进行编辑、查看等操作，在这种情况下，基于浏览器的 JSON 编辑器通常是我们的最佳选择，其中，jsoneditor-library-arm 就是一款非常实用的浏览器端 JSON 编辑器，可以通过 npm 包进行安装和使用。
安装
要使用 jsoneditor-library-arm，我们首先需要将其安装到我们的项目中，可以使用 npm 或 yarn 进行安装，具体命令如下：
npm install jsoneditor-library-arm
或者
yarn add jsoneditor-library-arm
安装完成后，我们可以将 jsoneditor-library-arm 引入我们的项目，并使用它来进行 JSON 数据的编辑和查看。
使用
使用 jsoneditor-library-arm 很简单，主要有以下几个步骤：
1. 引入样式文件
首先，我们需要将 jsoneditor-library-arm 的样式文件引入到我们的项目中，以便于正确地渲染出编辑器。具体代码如下：
<link rel="stylesheet" href="./node_modules/jsoneditor-library-arm/dist/jsoneditor.min.css" />
2. 引入脚本文件
接下来，我们需要将 jsoneditor-library-arm 的脚本文件引入到项目中，以便于在页面中使用编辑器组件。具体代码如下：
<script src="./node_modules/jsoneditor-library-arm/dist/jsoneditor.min.js"></script>
3. 创建 JSON 编辑器实例
创建 JSON 编辑器实例是使用 jsoneditor-library-arm 的重要步骤，具体代码如下：
var container = document.getElementById("jsoneditor");
var options = {};
var editor = new JSONEditor(container, options);其中，container 是一个 DOM 元素，表示编辑器所需要的容器元素，options 则是一个配置对象，可以设置编辑器的一些选项，比如是否只读、是否折叠、是否自动调整大小等等。
4. 设置 JSON 数据
创建 JSON 编辑器实例后，我们需要将需要编辑的 JSON 数据设置到编辑器中，具体代码如下：
var json = {
"name": "John Smith",
"age": 25
};
editor.set(json);5. 获取 JSON 数据
最后，我们还需要获取编辑器中的 JSON 数据，以便于处理或者保存。具体代码如下：
var json = editor.get();
示例代码
下面是一个简单的示例代码，用于展示如何使用 jsoneditor-library-arm 进行 JSON 数据的编辑：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------ ------------
----- ---------------- -------------------------------------------------------------------- --
------- ----------------------------------------------------------------------------
-------
------
---- ----------------------
------- ------------------------------
--------
--- --------- - --------------------------------------
--- ------- - ---
--- ------ - --- --------------------- ---------
--- ---- - -
------- ----- -------
------ --
--
-----------------
-------- -------- -
--- ---- - -------------
------------------
-- ----- --------
-
---------
-------
-------指导意义
jsoneditor-library-arm 是一款非常实用的浏览器端 JSON 编辑器，能够帮助我们快速地在页面中对 JSON 数据进行编辑、查看和保存操作。掌握 jsoneditor-library-arm 的使用方法，不仅可以提高我们的开发效率，还可以使得我们的应用程序更加易于维护和扩展。因此，学习 jsoneditor-library-arm 是非常有意义的，尤其是对于那些需要频繁处理 JSON 数据的前端开发人员来说。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669f81e8991b448e2d85