jdorn / json-editor Goto Github PK
View Code? Open in Web Editor NEWJSON Schema Based Editor
License: MIT License
JSON Schema Based Editor
License: MIT License
You can pass in the theme to the initial options hash, but there is no way to pass in a templating engine.
$("#editor").jsoneditor({
schema: {},
template: "mustache"
});
This should take precedence over $.jsoneditor.template
when set.
description
should add a tooltip to the field.
default
should pre-fill the field.
These are methods an editor should implement
<input>
element)These are the methods a theme should implement
Support definitions and $ref
http://json-schema.org/latest/json-schema-validation.html#anchor94
{
"type": "array",
"items": { "$ref": "#/definitions/positiveInteger" },
"definitions": {
"positiveInteger": {
"type": "integer",
"minimum": 0,
"exclusiveMinimum": true
}
}
}
We should add built-in support for popular template engines:
Use the following pattern:
$.jsoneditor.templates = {};
$.jsoneditor.templates.swig = function() {
if(!window.swig) return false;
return swig;
};
$.jsoneditor.templates.mustache = function() {
if(!window.Mustache) return false;
return function(template) {
return function(context) {
return Mustache.render(template, context);
}
}
};
// ...
Then, set $.jsoneditor.template
to the first one that doesn't evaluate to false.
A user should be able to set the template engine at any point by doing:
// Included template engine
$.jsoneditor.template = "mustache";
// Custom template engine
$.jsoneditor.template = function(template) {
return function(context) {
MyTemplateEngine.render(template, context);
}
})
Can implement this several ways:
Make the existing table
editor able to handle objects as well as arrays.
{
"type": "object",
"editor": "table"
}
Make the object
editor look for a format
property.
{
"type": "object",
"format": "table"
}
Add an editor option.
{
"type": "object",
"options": {
"table": true
}
}
My first preference would be to re-use the table
editor so objects are handled the same way as arrays.
minItems and maxItems:
show/hide the "add/remove property" links for an object when minProperties
or maxProperties
is hit.
Add a resolver function that takes a schema and returns the editor to use. Have an easy way to extend this function.
First pass:
$.jsoneditor.resolvers = [
function(schema) {
// Use the 'type' property
return schema.type;
}
];
// Add your own resolver to the front of the list
$.jsoneditor.resolvers.unshift(function(schema) {
if(schema.type == "array" && schema.format == "table") {
return "table";
}
});
If the editor
property of a schema is set, use that. Otherwise, loop through the resolvers until one returns a valid value. If none of them return a valid value, throw an exception.
Arrays of numbers, arrays of arrays, etc.
It's currently possible to enter data in the editor that doesn't validate against the schema. For example, entering a string value that doesn't match the required pattern.
There should be a way to check if the value is valid without requiring a separate JSON Schema validator. For example:
$("#editor_holder").jsoneditor('validate',function(errors) {
console.log(errors);
});
errors
would be an object where the keys are the paths and the values are error messages. Here is an exmaple:
{
"root.age": "Must be between 18 and 99",
"root.pets.0.name": "Doesn't match required pattern ^[a-z]{5,}$"
}
If the data validates against the schema, then errors
will be undefined in the callback.
Toggling the table editor would show/hide the table tag.
This should also support the collapsed
editor option.
Support template engines other than swig. Here's an example for Handlebars:
// Default value
$.jsoneditor.template = swig;
// Handlebars supports the same API as swig
$.jsoneditor.template = Handlebars;
// Mustache needs a small wrapper object to support swig's api
$.jsoneditor.template = {
compile: function(template) {
return function(view) {
return Mustache.render(template, view);
}
}
};
Add a $.fn.jsoneditor
option to control what css framework the editor should be styled with. Try to include the following out of the box:
Skins should be flexible enough so that a user can create a custom one themselves. I'm thinking something like:
$.jsoneditor.skins.bootstrap2 = {
getFormInput: function(type) {
return $("<input type='"+type+"'>");
},
composeFormControl: function(div, label, input) {
div.append(label);
div.append(input);
}
//...
};
This should re-purpose the type switcher currently used for union types.
The tough part is going to be coming up with display names to put in the drop down. This is the order of preference
title
property if setdescription
property if set (maybe only the first N characters)format
property if settype
property if setIf more than one select option is going to have the same display text, add an incrementing number to the end of each (e.g. "string 1", "string 2").
The required
keyword lists the specific properties of an object that must be set. Currently, all object properties are always set, so validating against this doesn't make any sense. To add support for this keyword, we can do one or both of the following:
required
to mean not-empty. This means a blank string will fail. This will be inconsistent with the specification, but more inline with other implementations and common usage. I think this should be the default behavior and have an option to use the spec definition of required
instead.additionalProperties
, patternProperties
, maxProperties
, and minProperties
.A potential UI for removing properties could be something like this:
There should be an "Edit JSON" button for object and array editors that opens up a textarea where the user can edit the raw JSON value.
{
"type": "array",
"enum": [
[
{
"$ref": "http://localhost/json-editor/tests/string.json"
}
]
]
}
Here is what needs to be added to support JSON Schema V3 in addition to the already supported V4:
required
boolean attributeany
typedisallow
divisibleBy
extends
Add the following custom editors in addition to table
:
Property dependencies should just affect the required status of child editors.
Schema dependencies should be dealt with the same way as allOf
.
If minimum is not a multiple of multipleOf
, set minimum to the next highest multiple.
If maximum is not a multiple of multipleOf
, set maximum to the next lowest multiple.
Set step
parameter of range input to multipleOf
.
Handle error conditions for minimum>=maximum
If additionalProperties
is not false, include an add property
button that pops up a text input where you enter a property name.
If the property already is defined, show an error.
patternProperties
, use that as the schema.additionalProperties
is a schema, use that.The add property
button should be hidden when/if minProperties
is reached.
The behavior of the remove property
links needs to change as well.
properties
, it should collapse the field like it currently does.showValidationErrors
method for each editor which takes the validation result. If the editor doesn't have any errors in this array, it should remove all errors messages and error styling.Have the core and each editor in a separate source file. Concatenate them together with grunt and produce a minified version.
This should improve the workflow.
Also, now that most of the JSON Schema spec is supported, the documentation should be updated to just list the schema keywords we don't support or only partially support.
The HTML5 range input looks terrible and doesn't display the value anywhere.
Replace this with a custom range input, maybe theme specific.
The following comment should be at the top of the minified dist file. It has license and version info.
/*! JSON Editor v0.2.7 - JSON Schema -> HTML Editor
* By Jeremy Dorn - https://github.com/jdorn/json-editor/
* Released under the MIT license
*
* Date: 2013-12-24
*/
Basically recursively merge the schemas in allOf
and extends
with the main schema before building the editor.
{
"type": "object",
"allOf": [
{
"properties": {
"key1": {
"type": "string"
}
},
"required": ["key1"]
},
{
"properties": {
"key2": {
"type": "string"
}
},
"required": ["key2"]
}
]
}
Should produce the following after it's expanded:
{
"type": "object",
"properties": {
"key1": {
"type": "string"
},
"key2": {
"type": "string"
}
},
"required": ["key1","key2"]
}
Support minimum
, maximum
, exclusiveMinimum
, exclusiveMaximum
, multipleOf
schema keywords.
A simple template engine should be included as a fallback.
It should only support the most basic macro replacements:
This is a {{macro}} replacement.
Right now, if you want to use a theme other than bootstrap2, you have to pass it in every time you instantiate an editor.
The most common use case would be all editors on the page using a single theme, so it makes more sense to set this globally, the way the template it set.
$.jsoneditor.theme = 'jqueryui';
Add ability in the schema to set an editor of type object
to be collapsed by default. Maybe this should be abstracted to support arbitrary editor options.
{
"type": "object",
"options": {
"collapsed": true
},
"properties": {
}
}
The maxlength
and pattern
input attributes should be used.
For minLength
, if no pattern
is specified, the input pattern should be set to .{minLength,}
. Otherwise, just rely on validation and error messages.
Right now, $ref
only works when referencing local schemas defined in a definitions
block. $ref
should also be able to load schemas from external urls.
{
"description": "User's location",
"$ref": "http://json-schema.org/geo"
}
JSON Editor's use of the id
keyword is not consistent with the specification.
JSON Editor will use the id
field as a display title if title
is not set. This doesn't make sense with the specification since ids are urls or url fragments that aren't user friendly to display. Instead, only title
and key
should be used as display names.
This currently breaks when used with real world id
fields:
{
"type": "array",
"items": {
"id": "http://example.com/item-schema",
"type": "object",
"properties": {
"key1": {
"type": "string"
},
"key2": {
"type": "string",
"template": "{{key1}}",
"vars": {
"key1": "http://example.com/item-schema.key1"
}
}
}
}
}
This will currently break since JSON Editor splits the template variable path on the period character, so the first part would be http://example
, which isn't a valid id in the schema.
A better approach would be to separate the id from the path when declaring template variables.
{
"vars": {
"key1": ["http://example.com/item-schema","key"],
"key2": ["#","path.to.key"]
}
}
This format can maintain backwards compatibility with the current one, which is always nice.
If items
is an array, array elements 0 through items.length
should validate against its respective schema.
additionalItems
is set to false, set minItems
to Math.min(minItems, items.length)
.additionalItems
is true or not set, all additional items should use an empty schema.additionalItems
schema.Move validation logic to it's own class.
$.jsoneditor.Validator = Class.extend({
init: function(schema) {
},
validate: function(value) {
var errors = [];
errors.push({
path: "person.name.fname",
property: "minLength",
message: "Must be at least 4 characters long"
});
return errors;
}
});
The Validator class should cache validation results since it may be used extensively internally.
The format keyword should change which HTML input type is used. For example:
{
"type": "string",
"format": "email"
}
This should still use the string editor, but should do <input type='email'>
instead of the default text.
We should support the following formats:
To make the "range" type work, we also need to support the minimum
and maximum
JSON schema keywords.
{
"type": "integer",
"format": "range",
"minimum": 20,
"maximum": 40
}
<input type='range' min="20" max="40">
At least on Chrome, when using , the value isn't displayed anywhere, so there is no way to tell what it is set at without looking at the outputted json.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.