let element = document.getElementById('editor');
let editor = new JSONEditor(element, options);

const editor = new JSONEditor(element, {
    //...
    disable_edit_json: 1
});

let schema = {
    compact: {
        type: 'string',
        options: {
            // option
            compact: true
        }
    },
    hidden: {
        type: 'string',
        options: {
            // option
            hidden: true
        }
    },
    multi: {
        type: 'object',
        format: 'grid',
        properties: {
            color: {
                type: 'integer',
                enum: [1, 2, 3, 4, 5],
                options: {
                    // option
                    grid_columns: 6,
                    // option
                    enum_titles: ['Black', 'Red', 'Green', 'Blue', 'White']
                }
            },
            intro: {
                type: 'string',
                format: 'textarea',
                options: {
                    // option
                    grid_columns: 6,
                    // option
                    expand_height: true
                }
            },
            empty: {
                type: 'string'
            }
        },
        options: {
            // option
            collapsed: true,
            // option
            remove_empty_properties: true
        }
    },
    list: {
        type: 'array',
        format: 'table',
        items: {
            type: 'object',
            properties: {
                name: {
                    type: 'string',
                    options: {
                        // option
                        input_width: '150px'
                    }
                },
                id: {
                    type: 'string',
                    format: 'textarea',
                    options: {
                        // option
                        input_height: '60px'
                    }
                }
            }
        }
    }
};

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

const value = editor.getValue();
console.log(value.name);

// 首先按路径获取编辑器的子节点
const name = editor.getEditor('root.name');

// 路径无效时，getEditor 会返回 null，避免报错
if (name) {
    name.setValue('John Smith');
    console.log(name.getValue());
}

const errors = editor.validate();

if (errors.length) {
    // errors 是一个对象组成的数组，对象属性包括`path`、`property`、`message`
    console.log(errors);
}

const errors = editor.validate({...});

let handle = () => {
    // 相应处理
};
editor.on('change', handle);

editor.off('change', handle); // 第二参数不传的话，默认停止监听所有事件

editor.watch('root.name', () => {
    // 相应处理
});

editor.unwatch('root.name', handle); // 第二参数不传的话，默认停止监听该节点上所有事件

// 禁止编辑整个表单
editor.disable();

// 禁止编辑指定路径的表单项
editor.getEditor('root.name').disable();

// 允许编辑整个表单
editor.enable();

// 允许编辑指定路径的表单项
editor.getEditor('root.name').enable();

// 检查整个表单的可编辑状态
if (editor.isEnabled()) {
    alert('ok');
}

// 停用指定路径的表单项(即整体数据不再包含该字段值，相当于 show_opt_in 选项打开，并且未勾选当前项)
// 仅支持非 required 项
editor.getEditor('root.name').deactivate();

// 启用指定路径的表单项
editor.getEditor('root.name').activate();

// 从 DOM 树移除当前编辑器节点
editor.destroy();

let schema = {
    name: {
        type: 'string',
        title: 'User Name', // 输入框对应的 label，不提供的话默认使用 key 值
        description: 'input text for user name', // 该字段的描述，显示在输入框下方
        default: 'bob', // 该字段的默认值
        options: {
            // 可以通过 options 字段传入一些定制化的设定
            inputAttributes: {
                placeholder: 'your name here...',
                class: 'form-control'
            }
        }
    }
};

let schema = {
    type: 'string',
    // 相当于限制该字符串不能为空
    minLength: 1
};

let schema = {
    type: 'string',
    format: 'textarea'
};

let schema = {
    type: 'string',
    format: 'color',
    options: {
        colorpicker: {
            popup: 'bottom', // 弹出位置，支持 top、left、right，默认是 bottom
            editorFormat: 'hex', // 颜色格式，支持 rgb、hsl，默认是 hex
            alpha: true // 是否支持透明度
        }
    }
};

let schema = {
    type: 'string',
    format: 'datetime-local',
    options: {
        flatpickr: {
            inline: true, // 是否启用行内模式，即日期选择框直接显示，和 wrap 互斥
            inlineHideInput: false, // 当启用 inline 模式时，是否隐藏原生的输入框
            wrap: true, // 是否启用按钮群组模式，可以显示切换和清除按钮，和 inline 互斥
            showToggleButton: false, // 当启用 wrap 模式时，是否显示切换按钮
            showClearButton: false, // 当启用 wrap 模式时，是否显示清除按钮
            defaultHour: 7, // 默认小时数
            defaultMinute: 19, // 默认分钟数
            hourIncrement: 2, // 每次点击按钮小时增量
            minuteIncrement: 3, // 每次点击按钮分钟增量
            enableSeconds: true, // 是否启用秒数
            time_24hr: true, // 是否启用 24 小时制
            allowInput: true // 是否允许手动输入
        }
    }
};

let schema = {
    type: 'string',
    format: 'uuid',
    description: 'uuid field with value'
};

let schema = {
    type: 'string',
    format: 'url',
    options: {
        upload: {
            upload_handler: 'uploadHandler'
        }
    },
    links: [
        {
            href: '{{self}}',
            rel: 'view'
        }
    ]
};

JSONEditor.defaults.callbacks.upload = {
    uploadHandler: function (jseditor, type, file, callback) {
        if (type === 'root.uploadfail') {
            callback.failure('Upload failed');
        } else {
            var step = 0;

            var tickFunction = function () {
                step += 1;
                console.log('progress: ' + step);

                if (step < 100) {
                    callback.updateProgress(step);
                    window.setTimeout(tickFunction, 50);
                } else if (step == 100) {
                    callback.updateProgress();
                    window.setTimeout(tickFunction, 500);
                } else {
                    callback.success('http://www.example.com/images/' + file.name);
                }
            };

            window.setTimeout(tickFunction);
        }
    }
};

let schema = {
    type: 'string',
    media: {
        binaryEncoding: 'base64',
        type: 'img/png'
    }
};

let schema = {
    hidden: {
        type: 'string',
        options: {
            hidden: true
        }
    },
    hiddenAnother: {
        type: 'string',
        format: 'hidden'
    }
};

let schema = {
    type: 'string',
    format: 'xhtml',
    options: {
        wysiwyg: true
    }
};

let schema = {
    type: 'string',
    format: 'markdown'
};

let schema = {
    type: 'string',
    format: 'sql',
    options: {
        ace: {
            theme: 'ace/theme/vibrant_ink',
            tabSize: 2,
            wrap: true
        }
    }
};

let schema = {
    type: 'string',
    format: 'radio',
    enum: ['get', 'post', 'put', 'delete']
};

let schema = {
    type: 'string',
    format: 'select2',
    enum: ['get', 'post', 'put', 'delete']
};

let schema = {
    type: 'boolean',
    format: 'checkbox',
    title: '是否启用',
    default: true
};

let schema = {
    type: 'boolean',
    format: 'toggle'
};

let schema = {
    type: 'integer',
    default: 1,
    minimum: 1,
    maximum: 1000
};

let schema = {
    type: 'number',
    format: 'datetime-local',
    options: {
        flatpickr: {
            ...
        }
    }
};

let schema = {
    type: 'integer',
    enum: [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014]
};

let schema = {
    type: 'array',
    items: {
        type: 'string'
    }
};
let schema2 = {
    type: 'array',
    format: 'table',
    items: {
        type: 'object',
        properties: {
            name: {
                type: 'string',
                options: {
                    // 通过 input_width 变相实现自定义 td 的宽度
                    input_width: '60px'
                }
            },
            id: {
                type: 'string'
            }
        }
    }
};

let schema = {
    type: 'array',
    format: 'table',
    uniqueItems: 'name',
    items: {
        type: 'object',
        properties: {
            name: {
                type: 'string'
            },
            id: {
                type: 'string'
            }
        }
    }
};

let schema = {
    type: 'array',
    format: 'table',
    uniqueItems: true,
    minItems: 1,
    maxItems: 10,
    items: {
        type: 'string'
    }
};

let schema = {
    type: 'array',
    format: 'checkbox',
    uniqueItems: true,
    items: {
        type: 'string',
        enum: ['A-Yes', 'A-Unknown', 'B-Yes', 'B-Unknown', 'C-Yes', 'C-Unknown', 'D-Yes', 'D-Unknown', 'E-Yes', 'E-Unknown']
    }
};

let schema = {
    type: 'array',
    format: 'select2',
    uniqueItems: true,
    items: {
        type: 'string',
        enum: ['A-Yes', 'A-Unknown', 'B-Yes', 'B-Unknown', 'C-Yes', 'C-Unknown', 'D-Yes', 'D-Unknown', 'E-Yes', 'E-Unknown']
    }
};

editor.on('moveRow', (editor) => {
    console.log('moveRow', editor);
});
editor.on('addRow', (editor) => {
    console.log('addRow', editor);
});
editor.on('deleteRow', (editor) => {
    console.log('deleteRow', editor);
});
editor.on('deleteAllRows', (editor) => {
    console.log('deleteAllRows', editor);
});

let schema = {
    type: 'object',
    properties: {
        name: {type: 'string'}
    }
};

let schema = {
    type: 'object',
    format: 'grid-strict',
    properties: {
        a: {
            title: 'a',
            type: 'string',
            options: {
                grid_columns: 4
            }
        },
        b: {
            title: 'b',
            type: 'string',
            options: {
                grid_columns: 4,
                grid_break: true
            }
        },
        c: {
            title: 'c',
            type: 'string',
            options: {
                grid_columns: 6
            }
        },
        d: {
            title: 'd',
            type: 'string',
            options: {
                grid_columns: 6
            }
        }
    }
};

let schema = {
    type: 'object',
    format: 'categories',
    basicCategoryTitle: 'ab',
    properties: {
        a: {
            title: 'a',
            type: 'string'
        },
        b: {
            title: 'b',
            type: 'string'
        },
        location: {
            type: 'object',
            title: 'Location',
            properties: {
                city: {
                    type: 'string'
                },
                state: {
                    type: 'string'
                }
            }
        },
        people: {
            type: 'array',
            format: 'table',
            title: 'People',
            uniqueItems: true,
            items: {
                type: 'string'
            }
        }
    }
};