PyPI 官网下载 | cxsystem2-0.0a31.tar.gz

# Deprecation notice This repo is no longer maintained (see also https://github.com/jdorn/json-editor/issues/800) **Development is continued at https://github.com/json-editor/json-editor** For details please visit https://github.com/json-editor/json-editor/issues/5 --- JSON Editor ===========  JSON Editor takes a JSON Schema and uses it to generate an HTML form. It has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/ Download the [production version][min] (22K when gzipped) or the [development version][max]. [min]: https://raw.github.com/jdorn/json-editor/master/dist/jsoneditor.min.js [max]: https://raw.github.com/jdorn/json-editor/master/dist/jsoneditor.js Requirements ----------------- JSON Editor has no dependencies. It only needs a modern browser (tested in Chrome and Firefox). ### Optional Requirements The following are not required, but can improve the style and usability of JSON Editor when present. * A compatible JS template engine (Mustache, Underscore, Hogan, Handlebars, Swig, Markup, or EJS) * A compatible CSS framework for styling (bootstrap 2/3, foundation 3/4/5, or jqueryui) * A compatible icon library (bootstrap 2/3 glyphicons, foundation icons 2/3, jqueryui, or font awesome 3/4) * [SCEditor](http://www.sceditor.com/) for WYSIWYG editing of HTML or BBCode content * [EpicEditor](http://epiceditor.com/) for editing of Markdown content * [Ace Editor](http://ace.c9.io/) for editing code * [Select2](http://ivaynberg.github.io/select2/) for nicer Select boxes * [Selectize](http://brianreavis.github.io/selectize.js/) for nicer Select & Array boxes * [math.js](http://mathjs.org/) for more accurate floating point math (multipleOf, divisibleBy, etc.) Usage -------------- If you learn best by example, check these out: * Basic Usage Example - http://rawgithub.com/jdorn/json-editor/master/examples/basic.html * Advanced Usage Example - http://rawgithub.com/jdorn/json-editor/master/examples/advanced.html * CSS Integration Example - http://rawgithub.com/jdorn/json-editor/master/examples/css_integration.html The rest of this README contains detailed documentation about every aspect of JSON Editor. For more under-the-hood documentation, check the wiki. ### Initialize ```js var element = document.getElementById('editor_holder'); var editor = new JSONEditor(element, options); ``` #### Options Options can be set globally or on a per-instance basis during instantiation. ```js // Set an option globally JSONEditor.defaults.options.theme = 'bootstrap2'; // Set an option during instantiation var editor = new JSONEditor(element, { //... theme: 'bootstrap2' }); ``` Here are all the available options: <table> <thead> <tr> <th>Option</th> <th>Description</th> <th>Default Value</th> </tr> </thead> <tbody> <tr> <td>ajax</td> <td>If <code>true</code>, JSON Editor will load external URLs in <code>$ref</code> via ajax.</td> <td><code>false</code></td> </tr> <tr> <td>disable_array_add</td> <td>If <code>true</code>, remove all "add row" buttons from arrays.</td> <td><code>false</code></td> </tr> <tr> <td>disable_array_delete</td> <td>If <code>true</code>, remove all "delete row" buttons from arrays.</td> <td><code>false</code></td> </tr> <tr> <td>disable_array_reorder</td> <td>If <code>true</code>, remove all "move up" and "move down" buttons from arrays.</td> <td><code>false</code></td> </tr> <tr> <td>disable_collapse</td> <td>If <code>true</code>, remove all collapse buttons from objects and arrays.</td> <td><code>false</code></td> </tr> <tr> <td>disable_edit_json</td> <td>If <code>true</code>, remove all Edit JSON buttons from objects.</td> <td><code>false</code></td> </tr> <tr> <td>disable_properties</td> <td>If <code>true</code>, remove all Edit Properties buttons from objects.</td> <td><code>false</code></td> </tr> <tr> <td>form_name_root</td> <td>The first part of the `name` attribute of form inputs in the editor. An full example name is `root[person][name]` where "root" is the form_name_root.</td> <td>root</td> </tr> <tr> <td>iconlib</td> <td>The icon library to use for the editor. See the <strong>CSS Integration</strong> section below for more info.</td> <td><code>null</code></td> </tr> <tr> <td>no_additional_properties</td> <td>If <code>true</code>, objects can only contain properties defined with the <code>properties</code> keyword.</td> <td><code>false</code></td> </tr> <tr> <td>refs</td> <td>An object containing schema definitions for URLs. Allows you to pre-define external schemas.</td> <td><code>{}</code></td> </tr> <tr> <td>required_by_default</td> <td>If <code>true</code>, all schemas that don't explicitly set the <code>required</code> property will be required.</td> <td><code>false</code></td> </tr> <tr> <td>keep_oneof_values</td> <td>If <code>true</code>, makes oneOf copy properties over when switching.</td> <td><code>true</code></td> </tr> <tr> <td>schema</td> <td>A valid JSON Schema to use for the editor. Version 3 and Version 4 of the draft specification are supported.</td> <td><code>{}</code></td> </tr> <tr> <td>show_errors</td> <td>When to show validation errors in the UI. Valid values are <code>interaction</code>, <code>change</code>, <code>always</code>, and <code>never</code>.</td> <td><code>"interaction"</code></td> </tr> <tr> <td>startval</td> <td>Seed the editor with an initial value. This should be valid against the editor's schema.</td> <td><code>null</code></td> </tr> <tr> <td>template</td> <td>The JS template engine to use. See the <strong>Templates and Variables</strong> section below for more info.</td> <td><code>default</code></td> </tr> <tr> <td>theme</td> <td>The CSS theme to use. See the <strong>CSS Integration</strong> section below for more info.</td> <td><code>html</code></td> </tr> <tr> <td>display_required_only</td> <td>If <code>true</code>, only required properties will be included by default.</td> <td><code>false</code></td> </tr> </tbody> </table> __*Note__ If the `ajax` property is `true` and JSON Editor needs to fetch an external url, the api methods won't be available immediately. Listen for the `ready` event before calling them. ```js editor.on('ready',function() { // Now the api methods will be available editor.validate(); }); ``` ### Get/Set Value ```js editor.setValue({name: "John Smith"}); var value = editor.getValue(); console.log(value.name) // Will log "John Smith" ``` Instead of getting/setting the value of the entire editor, you can also work on individual parts of the schema: ```js // 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 When feasible, JSON Editor won't let users enter invalid data. This is done by using input masks and intelligently enabling/disabling controls. However, in some cases it is still possible to enter data that doesn't validate against the schema. You can use the `validate` method to check if the data is valid or not. ```javascript // Validate the editor's current value against the schema var errors = editor.validate();