html代码编辑器jason,GitHub - 2947721120/jsoneditor: json编辑器

JSON 编辑器

描述

JSON编辑器是一个基于网络的工具来查看、编辑和格式JSON。 这模式如树有各种编辑器，代码编辑器和一个纯文本 。

编辑可以作为你自己的Web应用程序的一个组成部分。图书馆可以为 CommonJS模块，加载和模块，或作为一个JavaScript文件。

支持的浏览器：Chrome，Firefox，Safari，Opera，Internet Explorer 9.

功能特色

树编辑

编辑、添加、移动、删除、复制字段和值。

改变的值的类型。

排序数组和对象。

彩色编码。

搜索和突出树视图中的文本。

撤消和重做所有的行动。

代码编辑器

格式和紧凑的JSON。

彩色编码(由ACE)。

检查JSON(由ACE)。

文本编辑器

格式和紧凑的JSON。

Documentation

Install

with npm:

npm install jsoneditor

with bower:

bower install jsoneditor

download:

More

There is a directive available for using JSONEditor in Angular.js:

Use

// create the editor

var container = document.getElementById("jsoneditor");

var editor = new JSONEditor(container);

// set json

var json = {

"Array": [1, 2, 3],

"Boolean": true,

"Null": null,

"Number": 123,

"Object": {"a": "b", "c": "d"},

"String": "Hello World"

};

editor.set(json);

// get json

var json = editor.get();

Build

The code of the JSON Editor is located in the folder ./src. To build

jsoneditor:

Install dependencies:

npm install

Build JSON Editor:

npm run build

This will generate the files ./jsoneditor.js, ./jsoneditor.css, and

minified versions in the root of the project.

Custom builds

The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like browserify or webpack. First, install all dependencies of jsoneditor:

npm install

To create a custom bundle of the source code using browserify:

browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor

The Ace editor, used in mode code, accounts for about 75% of the total

size of the library. To exclude the Ace editor from the bundle:

browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox

To minify the generated bundle, use uglifyjs:

uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c