JSON Editor 中文文档

JSON Editor

依赖项

可选的选项

使用方法

初始化

var element = document.getElementById('editor_holder');

var editor = new JSONEditor(element, options);

选项

// 全局统一设置
JSONEditor.defaults.options.theme = 'bootstrap2';

// 实例初始化的时候设置
var editor = new JSONEditor(element, {
//...
theme: 'bootstrap2'
});

true

$ref

false

true

false

true

false

true

false

true

false

true

false

true

false

null

true

properties

properties

false

{}

true

required

false

true

oneOf

true

{}

interaction

change

always

never

"interaction"

null

default

html

ajax

true

ready

editor.on('ready',function() {
// Now the api methods will be available
editor.validate();
});

取值和赋值

editor.setValue({name: "John Smith"});

var value = editor.getValue();
console.log(value.name) // Will log "John Smith"

// Get a reference to a node within the editor
var name = editor.getEditor('root.name');

// `getEditor` will return null if the path is invalid
if(name) {
name.setValue("John Smith");

console.log(name.getValue());
}

验证

validate

// Validate the editor's current value against the schema
var errors = editor.validate();

if(errors.length) {
// errors is an array of objects, each with a `path`, `property`, and `message` parameter
// `property` is the schema keyword that triggered the validation error (e.g. "minLength")
// `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")
console.log(errors);
}
else {
// It's valid!
}

// Validate an arbitrary value against the editor's schema
var errors = editor.validate({
value: {
to: "test"
}
});

监听Change事件

change

editor.on('change',function() {
// Do something
});

editor.off('change',function_reference);

editor.watch('path.to.field',function() {
// Do something
});

editor.unwatch('path.to.field',function_reference);

禁用/可用编辑器

// Disable entire form
editor.disable();

// Disable part of the form
editor.getEditor('root.location').disable();

// Enable entire form
editor.enable();

// Enable part of the form
editor.getEditor('root.location').enable();

// Check if form is currently enabled
if(editor.isEnabled()) alert("It's editable!");

销毁

editor.destroy();

集成CSS

html

JSONEditor.defaults.options.theme

JSONEditor.defaults.options.theme = 'foundation5';

var editor = new JSONEditor(element,{
schema: schema,
theme: 'jqueryui'
});

图标库

// Set the global default
JSONEditor.defaults.options.iconlib = "bootstrap2";

// Set the icon lib during initialization
var editor = new JSONEditor(element,{
schema: schema,
iconlib: "fontawesome4"
});

JSON Schema Support

$ref and definitions

{
"type": "object",
"properties": {
"name": {
"title": "Full Name",
"$ref": "#/definitions/name"
},
"location": {
"$ref": "http://mydomain.com/geo.json"
}
},
"definitions": {
"name": {
"type": "string",
"minLength": 5
}
}
}

definitions

#/customkey/name

examples/recursive.html

hyper-schema links

links

mediaType

{
"title": "Blog Post Id",
"type": "integer",
"links": [
{
"rel": "comments",
"href": "/posts/{{self}}/comments/"
}
]
}

{
"title": "Video filename",
"type": "string",
"links": [
{
"href": "/videos/{{self}}.mp4",
"mediaType": "video/mp4"
}
]
}

href

self

属性排序

propertyOrder

{
"type": "object",
"properties": {
"prop1": {
"type": "string"
},
"prop2": {
"type": "string",
"propertyOrder": 10
},
"prop3": {
"type": "string",
"propertyOrder": 1001
},
"prop4": {
"type": "string",
"propertyOrder": 1
}
}
}

prop1

默认属性

properties

defaultProperties

{
"type": "object",
"properties": {
"name": {"type": "string"},
"age": {"type": "integer"}
},
"defaultProperties": ["name"]
}

name

格式化

string

integer

number

enum

format

{
"type": "object",
"properties": {
"color": {
"type": "string",
"format": "color"
}
}
}

一个特殊的字符串编辑器

html

bbcode

wysiwyg

true

{
"type": "string",
"format": "html",
"options": {
"wysiwyg": true
}
}

JSONEditor.plugins.sceditor

JSONEditor.plugins.sceditor.emoticonsEnabled = false;

markdown

{
"type": "string",
"format": "markdown"
}

JSONEditor.plugins.epiceditor

JSONEditor.plugins.epiceditor.basePath = 'epiceditor';

{
"type": "string",
"format": "yaml"
}

media

format

{
"type": "string",
"media": {
"type": "text/html"
}
}

JSONEditor.plugins.ace.theme

JSONEditor.plugins.ace.theme = 'twilight';

布尔类型

checkbox

{
"type": "boolean",
"format": "checkbox"
}

数组类型

table

tabs

table

tabs

table

{
"type": "array",
"format": "table",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
}
}
}
}

select

checkbox

{
"type": "array",
"uniqueItems": true,
"items": {
"type": "string",
"enum": ["value1","value2"]
}
}

checkbox

{
"type": "array",
"format": "select",
"uniqueItems": true,
"items": {
"type": "string",
"enum": ["value1","value2"]
}
}

对象

grid

{
"type": "object",
"properties": {
"name": { "type": "string" }
},
"format": "grid"
}

编辑器选项

collapsed

disable_array_add

disable_array_delete

disable_array_reorder

disable_collapse

disable_edit_json

disable_properties

enum_titles

enum

expand_height

grid_columns

hidden

input_height

input_width

remove_empty_properties

{
"type": "object",
"options": {
"collapsed": true
},
"properties": {
"name": {
"type": "string"
}
}
}

JSONEditor.defaults.editors.object.options.collapsed = true;

依赖

dependencies

{
"type": "object",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"watch": {
"fname": "first_name",
"lname": "last_name"
}
}
}
}

watch

fname

lname

first_name

last_name

{
"type": "array",
"items": {
"type": "object",
"id": "arr_item",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"watch": {
"fname": "arr_item.first_name",
"lname": "arr_item.last_name"
}
}
}
}
}

full_name

first_name

last_name

模板

full_name

fname [space] lname

{{variable}}

JSONEditor.defaults.options.template

JSONEditor.defaults.options.template = 'handlebars';

var editor = new JSONEditor(element,{
schema: schema,
template: 'hogan'
});

full_name

{
"type": "object",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"template": "{{fname}} {{lname}}",
"watch": {
"fname": "first_name",
"lname": "last_name"
}
}
}
}

枚举值

{
"type": "object",
"properties": {
"possible_colors": {
"type": "array",
"items": {
"type": "string"
}
},
"primary_color": {
"type": "string"
}
}
}

primary_color

possible_colors

primary_color

possible_colors

{
"primary_color": {
"type": "string",
"watch": {
"colors": "possible_colors"
}
}
}

enumSource

{
"primary_color": {
"type": "string",
"watch": {
"colors": "possible_colors"
},
"enumSource": "colors"
}
}

possible_colors

enumSource

{
// An array of sources
"enumSource": [
// Constant values
["none"],
{
// A watched field source
"source": "colors",
// Use a subset of the array
"slice": [2,5],
// Filter items with a template (if this renders to an empty string, it won't be included)
"filter": "{% if item !== 'black' %}1{% endif %}",
// Specify the display text for the enum option
"title": "{{item|upper}}",
// Specify the value property for the enum option
"value": "{{item|trim}}"
},
// Another constant value at the end of the list
["transparent"]
]
}

{
"enumSource": [{
// A watched field source
"source": [
{
"value": 1,
"title": "One"
},
{
"value": 2,
"title": "Two"
}
],
"title": "{{item.title}}",
"value": "{{item.value}}"
}]
]
}

{
"type": "object",
"properties": {
"possible_colors": {
"type": "array",
"items": {
"type": "object",
"properties": {
"text": {
"type": "string"
}
}
}
},
"primary_color": {
"type": "string",
"watch": {
"colors": "possible_colors"
},
"enumSource": [{
"source": "colors",
"value": "{{item.text}}"
}]
}
}
}

动态标题

title

Child 1

Child 2

1 - John (age 9)

2 - Sarah (age 11)

headerTemplate

title

i0

i1

self

{"name": "John", "age": 9}

{
"type": "array",
"title": "Children",
"items": {
"type": "object",
"title": "Child",
"headerTemplate": "{{ i1 }} - {{ self.name }} (age {{ self.age }})",
"properties": {
"name": { "type": "string" },
"age": { "type": "integer" }
}
}
}

Custom Template Engines

compile

var myengine = {
compile: function(template) {
// Compile should return a render function
return function(vars) {
// A real template engine would render the template here
var result = template;
return result;
}
}
};

// Set globally
JSONEditor.defaults.options.template = myengine;

// Set on a per-instance basis
var editor = new JSONEditor(element,{
schema: schema,
template: myengine
});

Language and String Customization

en

// Override a specific translation
JSONEditor.defaults.languages.en.error_minLength =
"This better be at least {{0}} characters long or else!";

// Create your own language mapping
// Any keys not defined here will fall back to the "en" language
JSONEditor.defaults.languages.es = {
error_notset: "propiedad debe existir"
};

en

JSONEditor.defaults.language

JSONEditor.defaults.language = "es";

Custom Editor Interfaces

location

// Add a resolver function to the beginning of the resolver list
// This will make it run before any other ones
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.type === "object" && schema.format === "location") {
return "location";
}

// If no valid editor is returned, the next resolver function will be used
});

object

{
"type": "array",
"items": {
"type": "object",
"format": "location",
"properties": {
"longitude": {
"type": "number"
},
"latitude": {
"type": "number"
}
}
}
}

自定义验证

// 如果验证通过返回一个空的数组，验证不通过则需要返回错误信息
JSONEditor.defaults.custom_validators.push(function(schema, value, path) {
var errors = [];
if(schema.format==="date") {
if(!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value)) {
// Errors must be an object with `path`, `property`, and `message`
errors.push({
path: path,
property: 'format',
message: 'Dates must be in the format "YYYY-MM-DD"'
});
}
}
return errors;
});

集成jQuery

$("#editor_holder")
.jsoneditor({
schema: {},
theme: 'bootstrap3'
})
.on('ready', function() {
// Get the value
var value = $(this).jsoneditor('value');

value.name = "John Smith";

// Set the value
$(this).jsoneditor('value',value);
});