@wirenboard/json-editor 2.5.3-wb13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env-dist +2 -0
- package/.eslintrc +7 -0
- package/.gitattributes +1 -0
- package/.github/PULL_REQUEST_TEMPLATE.md +9 -0
- package/.github/issue_template +25 -0
- package/.github/workflows/build.yml +58 -0
- package/.travis.yml +70 -0
- package/CHANGELOG.md +915 -0
- package/CONTRIBUTING.md +92 -0
- package/LICENSE +20 -0
- package/Makefile +26 -0
- package/README.md +1646 -0
- package/README_ADDON.md +573 -0
- package/UPGRADING.md +46 -0
- package/build/CssToJson.js +55 -0
- package/codecept.conf.js +35 -0
- package/config/.eslintrc +7 -0
- package/config/codeceptjs_helpers.js +139 -0
- package/config/helpers.js +10 -0
- package/config/karma.conf.js +93 -0
- package/config/readme.md +31 -0
- package/config/webpack.common.js +75 -0
- package/config/webpack.dev.js +15 -0
- package/config/webpack.nonmin.js +19 -0
- package/config/webpack.prod.js +25 -0
- package/dist/jsoneditor.js +14 -0
- package/dist/nonmin/jsoneditor.js +29097 -0
- package/dist/nonmin/jsoneditor.js.map +1 -0
- package/docs/ace_editor.html +56 -0
- package/docs/advanced.html +136 -0
- package/docs/basic.html +63 -0
- package/docs/basic_person.json +26 -0
- package/docs/choices.html +86 -0
- package/docs/cleave.html +132 -0
- package/docs/colorpicker.html +194 -0
- package/docs/css_integration.html +135 -0
- package/docs/datetime.html +305 -0
- package/docs/describedby.html +161 -0
- package/docs/enumsource.html +67 -0
- package/docs/images/categoriesDemo.png +0 -0
- package/docs/images/inheritance_tree.png +0 -0
- package/docs/images/jsoneditor.png +0 -0
- package/docs/imask.html +192 -0
- package/docs/index.html +579 -0
- package/docs/materialize_css.html +164 -0
- package/docs/meta_schema.json +705 -0
- package/docs/multiple_upload_base64.html +65 -0
- package/docs/person.json +73 -0
- package/docs/polyfills/assign.js +29 -0
- package/docs/radio.html +156 -0
- package/docs/recursive.html +170 -0
- package/docs/select2.html +99 -0
- package/docs/selectize.html +100 -0
- package/docs/signature.html +42 -0
- package/docs/starrating.html +137 -0
- package/docs/upload.html +131 -0
- package/docs/uuid.html +70 -0
- package/docs/wysiwyg.html +56 -0
- package/jasmine.json +11 -0
- package/json-editor-json-editor-2.5.3-wb13.tgz +0 -0
- package/package.json +100 -0
- package/release-notes.md +88 -0
- package/src/core.js +412 -0
- package/src/defaults.js +402 -0
- package/src/editor.js +707 -0
- package/src/editors/ace.js +89 -0
- package/src/editors/array/choices.js +103 -0
- package/src/editors/array/select2.js +110 -0
- package/src/editors/array/selectize.js +103 -0
- package/src/editors/array.css +9 -0
- package/src/editors/array.css.js +3 -0
- package/src/editors/array.js +818 -0
- package/src/editors/autocomplete.js +58 -0
- package/src/editors/base64.js +157 -0
- package/src/editors/button.js +97 -0
- package/src/editors/checkbox.js +95 -0
- package/src/editors/choices.css +3 -0
- package/src/editors/choices.css.js +3 -0
- package/src/editors/choices.js +69 -0
- package/src/editors/colorpicker.js +103 -0
- package/src/editors/datetime.js +141 -0
- package/src/editors/describedby.js +188 -0
- package/src/editors/enum.js +136 -0
- package/src/editors/hidden.js +127 -0
- package/src/editors/index.js +81 -0
- package/src/editors/info.js +20 -0
- package/src/editors/integer.js +19 -0
- package/src/editors/ip.js +36 -0
- package/src/editors/jodit.js +64 -0
- package/src/editors/multiple.js +409 -0
- package/src/editors/multiselect.js +218 -0
- package/src/editors/null.js +18 -0
- package/src/editors/number.js +51 -0
- package/src/editors/object.css +41 -0
- package/src/editors/object.css.js +3 -0
- package/src/editors/object.js +1290 -0
- package/src/editors/radio.js +111 -0
- package/src/editors/sceditor.js +72 -0
- package/src/editors/select.js +370 -0
- package/src/editors/select2.js +110 -0
- package/src/editors/selectize.js +112 -0
- package/src/editors/signature.js +113 -0
- package/src/editors/simplemde.js +100 -0
- package/src/editors/starrating.css +52 -0
- package/src/editors/starrating.css.js +3 -0
- package/src/editors/starrating.js +135 -0
- package/src/editors/stepper.js +27 -0
- package/src/editors/string.js +372 -0
- package/src/editors/table.js +516 -0
- package/src/editors/upload.js +321 -0
- package/src/editors/uuid.js +56 -0
- package/src/iconlib.js +24 -0
- package/src/iconlibs/bootstrap2.js +28 -0
- package/src/iconlibs/bootstrap3.js +28 -0
- package/src/iconlibs/fontawesome3.js +28 -0
- package/src/iconlibs/fontawesome4.js +28 -0
- package/src/iconlibs/fontawesome5.js +28 -0
- package/src/iconlibs/foundation2.js +24 -0
- package/src/iconlibs/foundation3.js +28 -0
- package/src/iconlibs/index.js +25 -0
- package/src/iconlibs/jqueryui.js +28 -0
- package/src/iconlibs/materialicons.js +49 -0
- package/src/iconlibs/openiconic.js +28 -0
- package/src/iconlibs/spectre.js +28 -0
- package/src/resolvers.js +128 -0
- package/src/schemaloader.js +408 -0
- package/src/style.css +150 -0
- package/src/style.css.js +3 -0
- package/src/templates/default.js +52 -0
- package/src/templates/ejs.js +13 -0
- package/src/templates/handlebars.js +1 -0
- package/src/templates/hogan.js +10 -0
- package/src/templates/index.js +21 -0
- package/src/templates/lodash.js +9 -0
- package/src/templates/markup.js +9 -0
- package/src/templates/mustache.js +9 -0
- package/src/templates/swig.js +1 -0
- package/src/templates/underscore.js +9 -0
- package/src/theme.js +659 -0
- package/src/themes/barebones.css +35 -0
- package/src/themes/barebones.css.js +3 -0
- package/src/themes/barebones.js +28 -0
- package/src/themes/bootstrap2.js +319 -0
- package/src/themes/bootstrap3.css +0 -0
- package/src/themes/bootstrap3.css.js +3 -0
- package/src/themes/bootstrap3.js +315 -0
- package/src/themes/bootstrap4.css +89 -0
- package/src/themes/bootstrap4.css.js +3 -0
- package/src/themes/bootstrap4.js +690 -0
- package/src/themes/bootstrap5.css.js +3 -0
- package/src/themes/foundation.js +569 -0
- package/src/themes/html.css +60 -0
- package/src/themes/html.css.js +3 -0
- package/src/themes/html.js +71 -0
- package/src/themes/index.js +28 -0
- package/src/themes/jqueryui.js +198 -0
- package/src/themes/materialize.js +426 -0
- package/src/themes/spectre.css +208 -0
- package/src/themes/spectre.css.js +3 -0
- package/src/themes/spectre.js +406 -0
- package/src/themes/tailwind.css +249 -0
- package/src/themes/tailwind.css.js +3 -0
- package/src/themes/tailwind.js +443 -0
- package/src/utilities.js +138 -0
- package/src/validator.js +877 -0
- package/src/validators/ip-validator.js +51 -0
- package/tests/Dockerfile +3 -0
- package/tests/README.md +48 -0
- package/tests/codeceptjs/codecept.json +42 -0
- package/tests/codeceptjs/constrains/if-then-else_test.js +143 -0
- package/tests/codeceptjs/core_test.js +217 -0
- package/tests/codeceptjs/editors/advanced_test.js +13 -0
- package/tests/codeceptjs/editors/array_any_of_test.js +50 -0
- package/tests/codeceptjs/editors/array_test.js +900 -0
- package/tests/codeceptjs/editors/button_test.js +35 -0
- package/tests/codeceptjs/editors/checkbox_test.js +21 -0
- package/tests/codeceptjs/editors/colorpicker_test.js +27 -0
- package/tests/codeceptjs/editors/datetime_test.js +33 -0
- package/tests/codeceptjs/editors/inheritance_test.js +11 -0
- package/tests/codeceptjs/editors/integer_test.js +84 -0
- package/tests/codeceptjs/editors/issues/issue-gh-812_test.js +32 -0
- package/tests/codeceptjs/editors/jodit_test.js +24 -0
- package/tests/codeceptjs/editors/multiselect_test.js +8 -0
- package/tests/codeceptjs/editors/number_test.js +82 -0
- package/tests/codeceptjs/editors/object_test.js +204 -0
- package/tests/codeceptjs/editors/option-no_default_values_test.js +42 -0
- package/tests/codeceptjs/editors/programmatic-changes_test.js +20 -0
- package/tests/codeceptjs/editors/radio_test.js +10 -0
- package/tests/codeceptjs/editors/rating_test.js +13 -0
- package/tests/codeceptjs/editors/select_test.js +22 -0
- package/tests/codeceptjs/editors/stepper_test.js +27 -0
- package/tests/codeceptjs/editors/string_test.js +118 -0
- package/tests/codeceptjs/editors/table-confirm-delete_test.js +67 -0
- package/tests/codeceptjs/editors/tabs_test.js +14 -0
- package/tests/codeceptjs/editors/uuid_test.js +21 -0
- package/tests/codeceptjs/editors/validation_test.js +14 -0
- package/tests/codeceptjs/meta-schema_test.js +17 -0
- package/tests/codeceptjs/schemaloader_test.js +13 -0
- package/tests/codeceptjs/steps.d.ts +13 -0
- package/tests/codeceptjs/steps_file.js +12 -0
- package/tests/codeceptjs/themes_test.js +519 -0
- package/tests/docker-compose.yml +34 -0
- package/tests/fixtures/basic_person.json +26 -0
- package/tests/fixtures/nested_object.json +26 -0
- package/tests/fixtures/person.json +55 -0
- package/tests/fixtures/recursive.json +8 -0
- package/tests/fixtures/some_types.json +32 -0
- package/tests/fixtures/string.json +3 -0
- package/tests/fixtures/validation.json +1140 -0
- package/tests/pages/_demo.html +475 -0
- package/tests/pages/advanced.html +137 -0
- package/tests/pages/anyof.html +80 -0
- package/tests/pages/array-anyof.html +142 -0
- package/tests/pages/array-checkboxes.html +41 -0
- package/tests/pages/array-choices.html +45 -0
- package/tests/pages/array-integers.html +37 -0
- package/tests/pages/array-move-events.html +61 -0
- package/tests/pages/array-multiselects.html +42 -0
- package/tests/pages/array-nested-arrays.html +40 -0
- package/tests/pages/array-numbers.html +37 -0
- package/tests/pages/array-objects.html +42 -0
- package/tests/pages/array-ratings.html +40 -0
- package/tests/pages/array-selectize.html +51 -0
- package/tests/pages/array-selects.html +36 -0
- package/tests/pages/array-strings.html +36 -0
- package/tests/pages/array.html +42 -0
- package/tests/pages/assets/pages.css +130 -0
- package/tests/pages/button-callbacks.html +77 -0
- package/tests/pages/checkbox-labels.html +114 -0
- package/tests/pages/colorpicker-no-3rd-party.html +43 -0
- package/tests/pages/colorpicker-use-vanilla-picker.html +50 -0
- package/tests/pages/core.html +118 -0
- package/tests/pages/datetime.html +76 -0
- package/tests/pages/form-name.html +108 -0
- package/tests/pages/grid-strict.html +311 -0
- package/tests/pages/grid.html +284 -0
- package/tests/pages/if-then-else-allOf.html +117 -0
- package/tests/pages/inheritance.html +76 -0
- package/tests/pages/integer.html +68 -0
- package/tests/pages/issues/_template.html +50 -0
- package/tests/pages/issues/issue-gh-812.html +110 -0
- package/tests/pages/issues/issue-gh-823-meta-schema.html +35 -0
- package/tests/pages/issues/issue-gh-848.html +81 -0
- package/tests/pages/meta_schema.json +705 -0
- package/tests/pages/number.html +89 -0
- package/tests/pages/object-no-additional-properties.html +65 -0
- package/tests/pages/object-no-duplicated-id.html +68 -0
- package/tests/pages/object-required-properties.html +236 -0
- package/tests/pages/object-with-dependencies-array.html +46 -0
- package/tests/pages/object-with-dependencies.html +60 -0
- package/tests/pages/object.html +79 -0
- package/tests/pages/oneof.html +103 -0
- package/tests/pages/option-no_default_values.html +58 -0
- package/tests/pages/programmatic-changes.html +120 -0
- package/tests/pages/read-only.html +105 -0
- package/tests/pages/select.html +41 -0
- package/tests/pages/stepper.html +59 -0
- package/tests/pages/string-ace-editor.html +52 -0
- package/tests/pages/string-cleave.html +46 -0
- package/tests/pages/string-custom-attributes.html +62 -0
- package/tests/pages/string-formats.html +52 -0
- package/tests/pages/string-formats2.html +57 -0
- package/tests/pages/string-jodit-editor.html +49 -0
- package/tests/pages/string-sceditor.html +62 -0
- package/tests/pages/table-move-events.html +56 -0
- package/tests/pages/table.html +46 -0
- package/tests/pages/tabs.html +131 -0
- package/tests/pages/themes.html +527 -0
- package/tests/pages/translate-property.html +247 -0
- package/tests/pages/urn.html +93 -0
- package/tests/pages/uuid.html +72 -0
- package/tests/pages/validation.html +99 -0
- package/tests/unit/.eslintrc +8 -0
- package/tests/unit/core.spec.js +309 -0
- package/tests/unit/defaults.spec.js +40 -0
- package/tests/unit/editor.spec.js +160 -0
- package/tests/unit/editors/array.spec.js +86 -0
- package/tests/unit/editors/object.spec.js +79 -0
- package/tests/unit/editors/table.spec.js +91 -0
- package/tests/unit/readme.md +35 -0
- package/tests/unit/schemaloader.spec.js +498 -0
- package/tests/unit/validator.spec.js +94 -0
- package/tests/unit/validators/ip-validator.spec.js +62 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>JSON Editor WYSIWYG Example</title>
|
|
6
|
+
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
|
7
|
+
<script src="https://cdn.jsdelivr.net/npm/ace-builds@latest/src-noconflict/ace.min.js"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<h1>JSON Editor ACE Editor Example</h1>
|
|
11
|
+
|
|
12
|
+
<p style='margin-bottom:20px;'>This example demonstrates JSON Editor's integration with ACE ditor</p>
|
|
13
|
+
|
|
14
|
+
<div id='editor_holder'></div>
|
|
15
|
+
<button id='submit'>Submit (console.log)</button>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
// Set ACE Editor basePath to same path as CDN Library.
|
|
19
|
+
window.ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/ace-builds@latest/src-noconflict/");
|
|
20
|
+
|
|
21
|
+
// Initialize the editor with a JSON schema
|
|
22
|
+
var editor = new JSONEditor(document.getElementById('editor_holder'),{
|
|
23
|
+
schema: {
|
|
24
|
+
"title": "SQL Editor",
|
|
25
|
+
"type": "object",
|
|
26
|
+
"required": [
|
|
27
|
+
"query"
|
|
28
|
+
],
|
|
29
|
+
"properties": {
|
|
30
|
+
"query": {
|
|
31
|
+
"type": "string",
|
|
32
|
+
"format": "sql",
|
|
33
|
+
"options": {
|
|
34
|
+
"ace": {
|
|
35
|
+
"theme": "ace/theme/vibrant_ink",
|
|
36
|
+
"tabSize": 2,
|
|
37
|
+
"useSoftTabs": true,
|
|
38
|
+
"wrap": true
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
startval: {
|
|
45
|
+
"query": "SELECT f.animal_id AS animal_id, \n f.animal_type AS animal_type, \n d.animal_description AS animal_description, \n f.animal_name AS animal_name, \n 'Farm' AS domain, \n att.animal_type_description AS description \n \nFROM tutorial.farm f \n \nLEFT OUTER JOIN tutorial.animal_types att \nON f.animal_type = att.animal_type_id \n \nLEFT OUTER JOIN tutorial.animal_descriptions d \nON f.animal_description = d.animal_description_id \n \nUNION ALL \n \nSELECT w.animal_id AS animal_id, \n w.animal_type AS animal_type, \n d.animal_description AS animal_description, \n w.animal_name AS animal_name, \n 'Wild' AS domain, \n att.animal_type_description AS description \n \nFROM tutorial.wild w \n \nLEFT OUTER JOIN tutorial.animal_types att \nON w.animal_type = att.animal_type_id \n \nLEFT OUTER JOIN tutorial.animal_descriptions d \nON w.animal_description = d.animal_description_id \n \nWHERE w.animal_id IN (SELECT animal_id FROM wild WHERE animal_id <= 3)"
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Hook up the submit button to log to the console
|
|
50
|
+
document.getElementById('submit').addEventListener('click',function() {
|
|
51
|
+
// Get the value from the editor
|
|
52
|
+
console.log(editor.getValue());
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Advanced JSON Editor Example</title>
|
|
6
|
+
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<h1>Advanced JSON Editor Example</h1>
|
|
10
|
+
|
|
11
|
+
<p>This example demonstrates the following:</p>
|
|
12
|
+
<ul>
|
|
13
|
+
<li>Loading external schemas via ajax (using $ref)</li>
|
|
14
|
+
<li>Setting the editor's value from javascript (try the Restore to Default button)</li>
|
|
15
|
+
<li>Validating the editor's contents (try setting name to an empty string)</li>
|
|
16
|
+
<li>Macro templates (try changing the city or state fields and watch the citystate field update automatically)</li>
|
|
17
|
+
<li>Enabling and disabling editor fields</li>
|
|
18
|
+
</ul>
|
|
19
|
+
|
|
20
|
+
<button id='submit'>Submit (console.log)</button>
|
|
21
|
+
<button id='restore'>Restore to Default</button>
|
|
22
|
+
<button id='enable_disable'>Disable/Enable Form</button>
|
|
23
|
+
<span id='valid_indicator'></span>
|
|
24
|
+
|
|
25
|
+
<div id='editor_holder'></div>
|
|
26
|
+
|
|
27
|
+
<script>
|
|
28
|
+
// This is the starting value for the editor
|
|
29
|
+
// We will use this to seed the initial editor
|
|
30
|
+
// and to provide a "Restore to Default" button.
|
|
31
|
+
var starting_value = [
|
|
32
|
+
{
|
|
33
|
+
name: "John Smith",
|
|
34
|
+
age: 35,
|
|
35
|
+
gender: "male",
|
|
36
|
+
location: {
|
|
37
|
+
city: "San Francisco",
|
|
38
|
+
state: "California",
|
|
39
|
+
citystate: ""
|
|
40
|
+
},
|
|
41
|
+
pets: [
|
|
42
|
+
{
|
|
43
|
+
name: "Spot",
|
|
44
|
+
type: "dog",
|
|
45
|
+
fixed: true
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "Whiskers",
|
|
49
|
+
type: "cat",
|
|
50
|
+
fixed: false
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
];
|
|
55
|
+
|
|
56
|
+
// Initialize the editor
|
|
57
|
+
var editor = new JSONEditor(document.getElementById('editor_holder'),{
|
|
58
|
+
// Enable fetching schemas via ajax
|
|
59
|
+
ajax: true,
|
|
60
|
+
|
|
61
|
+
// The schema for the editor
|
|
62
|
+
schema: {
|
|
63
|
+
type: "array",
|
|
64
|
+
title: "People",
|
|
65
|
+
format: "tabs",
|
|
66
|
+
items: {
|
|
67
|
+
title: "Person",
|
|
68
|
+
headerTemplate: "{{i}} - {{self.name}}",
|
|
69
|
+
oneOf: [
|
|
70
|
+
{
|
|
71
|
+
$ref: "basic_person.json",
|
|
72
|
+
title: "Basic Person"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
$ref: "person.json",
|
|
76
|
+
title: "Complex Person"
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
// Seed the form with a starting value
|
|
83
|
+
startval: starting_value,
|
|
84
|
+
|
|
85
|
+
// Disable additional properties
|
|
86
|
+
no_additional_properties: true,
|
|
87
|
+
|
|
88
|
+
// Require all properties by default
|
|
89
|
+
required_by_default: true
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// Hook up the submit button to log to the console
|
|
93
|
+
document.getElementById('submit').addEventListener('click',function() {
|
|
94
|
+
// Get the value from the editor
|
|
95
|
+
console.log(editor.getValue());
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
// Hook up the Restore to Default button
|
|
99
|
+
document.getElementById('restore').addEventListener('click',function() {
|
|
100
|
+
editor.setValue(starting_value);
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// Hook up the enable/disable button
|
|
104
|
+
document.getElementById('enable_disable').addEventListener('click',function() {
|
|
105
|
+
// Enable form
|
|
106
|
+
if(!editor.isEnabled()) {
|
|
107
|
+
editor.enable();
|
|
108
|
+
}
|
|
109
|
+
// Disable form
|
|
110
|
+
else {
|
|
111
|
+
editor.disable();
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
// Hook up the validation indicator to update its
|
|
116
|
+
// status whenever the editor changes
|
|
117
|
+
editor.on('change',function() {
|
|
118
|
+
// Get an array of errors from the validator
|
|
119
|
+
var errors = editor.validate();
|
|
120
|
+
|
|
121
|
+
var indicator = document.getElementById('valid_indicator');
|
|
122
|
+
|
|
123
|
+
// Not valid
|
|
124
|
+
if(errors.length) {
|
|
125
|
+
indicator.style.color = 'red';
|
|
126
|
+
indicator.textContent = "not valid";
|
|
127
|
+
}
|
|
128
|
+
// Valid
|
|
129
|
+
else {
|
|
130
|
+
indicator.style.color = 'green';
|
|
131
|
+
indicator.textContent = "valid";
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
</script>
|
|
135
|
+
</body>
|
|
136
|
+
</html>
|
package/docs/basic.html
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Basic JSON Editor Example</title>
|
|
6
|
+
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<h1>Basic JSON Editor Example</h1>
|
|
10
|
+
|
|
11
|
+
<div id='editor_holder'></div>
|
|
12
|
+
<button id='submit'>Submit (console.log)</button>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
// Initialize the editor with a JSON schema
|
|
16
|
+
var editor = new JSONEditor(document.getElementById('editor_holder'),{
|
|
17
|
+
schema: {
|
|
18
|
+
type: "object",
|
|
19
|
+
title: "Car",
|
|
20
|
+
properties: {
|
|
21
|
+
make: {
|
|
22
|
+
type: "string",
|
|
23
|
+
enum: [
|
|
24
|
+
"Toyota",
|
|
25
|
+
"BMW",
|
|
26
|
+
"Honda",
|
|
27
|
+
"Ford",
|
|
28
|
+
"Chevy",
|
|
29
|
+
"VW"
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
model: {
|
|
33
|
+
type: "string"
|
|
34
|
+
},
|
|
35
|
+
year: {
|
|
36
|
+
type: "integer",
|
|
37
|
+
enum: [
|
|
38
|
+
1995,1996,1997,1998,1999,
|
|
39
|
+
2000,2001,2002,2003,2004,
|
|
40
|
+
2005,2006,2007,2008,2009,
|
|
41
|
+
2010,2011,2012,2013,2014
|
|
42
|
+
],
|
|
43
|
+
default: 2008
|
|
44
|
+
},
|
|
45
|
+
safety: {
|
|
46
|
+
type: "integer",
|
|
47
|
+
format: "rating",
|
|
48
|
+
maximum: "5",
|
|
49
|
+
exclusiveMaximum: false,
|
|
50
|
+
readonly: false
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
// Hook up the submit button to log to the console
|
|
57
|
+
document.getElementById('submit').addEventListener('click',function() {
|
|
58
|
+
// Get the value from the editor
|
|
59
|
+
console.log(editor.getValue());
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Person",
|
|
3
|
+
"type": "object",
|
|
4
|
+
"id": "person",
|
|
5
|
+
"properties": {
|
|
6
|
+
"name": {
|
|
7
|
+
"type": "string",
|
|
8
|
+
"description": "First and Last name",
|
|
9
|
+
"minLength": 4
|
|
10
|
+
},
|
|
11
|
+
"age": {
|
|
12
|
+
"type": "integer",
|
|
13
|
+
"default": 21,
|
|
14
|
+
"minimum": 18,
|
|
15
|
+
"maximum": 99
|
|
16
|
+
},
|
|
17
|
+
"gender": {
|
|
18
|
+
"type": "string",
|
|
19
|
+
"enum": [
|
|
20
|
+
"male",
|
|
21
|
+
"female",
|
|
22
|
+
"other"
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>JSON Editor Choices Integration Example</title>
|
|
6
|
+
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
|
7
|
+
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
|
|
9
|
+
<style>
|
|
10
|
+
.choices > * {
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<h1>JSON Editor Choices Integration Example</h1>
|
|
17
|
+
|
|
18
|
+
<p style='margin-bottom:20px;'>This example demonstrates JSONEditor's integration with Choices</p>
|
|
19
|
+
|
|
20
|
+
<div id='editor_holder'></div>
|
|
21
|
+
<button id='submit'>Submit (console.log)</button>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
// Initialize the editor with a JSON schema
|
|
25
|
+
var editor = new JSONEditor(document.getElementById('editor_holder'),{
|
|
26
|
+
schema: {
|
|
27
|
+
type: "object",
|
|
28
|
+
title: "Text",
|
|
29
|
+
required: ["fontSize","color","font","weight","possibleFonts"],
|
|
30
|
+
properties: {
|
|
31
|
+
fontSize: {
|
|
32
|
+
format: "choices",
|
|
33
|
+
type: "integer",
|
|
34
|
+
enum: [10,11,12,14,16,18,20,22,24,36,48,60,72,100],
|
|
35
|
+
default: 24,
|
|
36
|
+
options: {
|
|
37
|
+
choices_options: {
|
|
38
|
+
shouldSort: false
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
color: {
|
|
43
|
+
type: "string",
|
|
44
|
+
format: "choices",
|
|
45
|
+
enum: ["black","red","green","blue","yellow","orange","purple","brown","white","cyan","magenta"]
|
|
46
|
+
},
|
|
47
|
+
font: {
|
|
48
|
+
type: "string",
|
|
49
|
+
format: "choices",
|
|
50
|
+
enumSource: "possible_fonts",
|
|
51
|
+
watch: {
|
|
52
|
+
"possible_fonts": "root.possibleFonts"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
weight: {
|
|
56
|
+
type: "string",
|
|
57
|
+
format: "choices",
|
|
58
|
+
enum: ["normal","bold","bolder","lighter"],
|
|
59
|
+
options: {
|
|
60
|
+
enum_titles: ["Normal (400)","Bold (700)","Bolder (900)","Lighter (200)"]
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
possibleFonts: {
|
|
64
|
+
type: "array",
|
|
65
|
+
format: "choices",
|
|
66
|
+
uniqueItems: true,
|
|
67
|
+
items: {
|
|
68
|
+
type: "string"
|
|
69
|
+
},
|
|
70
|
+
default: ["Arial","Times","Helvetica","Comic Sans"]
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
startval: {
|
|
75
|
+
color: "red"
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
// Hook up the submit button to log to the console
|
|
80
|
+
document.getElementById('submit').addEventListener('click',function() {
|
|
81
|
+
// Get the value from the editor
|
|
82
|
+
console.log(editor.getValue());
|
|
83
|
+
});
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
package/docs/cleave.html
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
|
|
5
|
+
<head>
|
|
6
|
+
<title>Cleave.js editor examples</title>
|
|
7
|
+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
8
|
+
|
|
9
|
+
<!-- Enable responsive viewport -->
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
+
|
|
12
|
+
<!-- jQuery -->
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
|
14
|
+
|
|
15
|
+
<!-- Bootstrap4 -->
|
|
16
|
+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
|
17
|
+
|
|
18
|
+
<!-- fontawesome5 -->
|
|
19
|
+
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.1/css/all.css'>
|
|
20
|
+
|
|
21
|
+
<!-- Cleave.js -->
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.5.8/dist/cleave.min.js" crossorigin="anonymous"></script>
|
|
23
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cleave.js@1.5.8/dist/addons/cleave-phone.dk.js"></script>
|
|
24
|
+
<!-- JSON-Editor -->
|
|
25
|
+
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
|
26
|
+
|
|
27
|
+
<style type="text/css">
|
|
28
|
+
body {
|
|
29
|
+
margin: 1em;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
</style>
|
|
33
|
+
</head>
|
|
34
|
+
|
|
35
|
+
<body>
|
|
36
|
+
<h2>Example showing how to use Cleave.js to format your <input/> content when you are typing.</h2>
|
|
37
|
+
|
|
38
|
+
<p>For documentation on the Cleave.js options, look at <a href="https://github.com/nosir/cleave.js" target="_blank" title="Cleave.js Github">Cleave.js</a> Github page. You can also find a lot of examples in this <a href="https://jsfiddle.net/nosir/aLnhdf3z/" target="_blank" title="Cleave.js JSFiddle">JSFiddle</a> page.</p>
|
|
39
|
+
<div id="form"></div>
|
|
40
|
+
<script type="text/javascript">
|
|
41
|
+
|
|
42
|
+
// Show the creditcard type in the field 'help-block' section
|
|
43
|
+
// Possible values: uatp, amex, diners, discover, mastercard, dankort, instapayment, jcb15, jcb, maestro, visa, mir, unionPay, general, generalStrict, unknown
|
|
44
|
+
var creditCardTypeChangedHandler = function(type) {
|
|
45
|
+
var el = this.element.nextSibling;
|
|
46
|
+
if (el && el.classList.contains('help-block')) {
|
|
47
|
+
el.innerHTML = 'Card type: <strong>' + type + '</strong>';
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
var options = {
|
|
52
|
+
"theme": "bootstrap4",
|
|
53
|
+
"template": "handlebars",
|
|
54
|
+
"iconlib": "fontawesome5",
|
|
55
|
+
"schema": {
|
|
56
|
+
"title": "Cleave.js editor examples",
|
|
57
|
+
"id": "test",
|
|
58
|
+
"type": "object",
|
|
59
|
+
"format": "grid",
|
|
60
|
+
"options": {
|
|
61
|
+
"disable_edit_json": false,
|
|
62
|
+
"disable_properties": false
|
|
63
|
+
},
|
|
64
|
+
"properties": {
|
|
65
|
+
"creditcard": {
|
|
66
|
+
"type": "string",
|
|
67
|
+
"title": "Credit Card",
|
|
68
|
+
"description": " ",
|
|
69
|
+
"options": {
|
|
70
|
+
"grid_columns": 6,
|
|
71
|
+
"inputAttributes": {
|
|
72
|
+
"placeholder": "enter credit card number"
|
|
73
|
+
},
|
|
74
|
+
"cleave": {
|
|
75
|
+
"creditCard": true,
|
|
76
|
+
"onCreditCardTypeChanged": creditCardTypeChangedHandler
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
"phone": {
|
|
81
|
+
"type": "string",
|
|
82
|
+
"title": "Phone number",
|
|
83
|
+
"description": "Phone number formatting (danish) + prefix",
|
|
84
|
+
"options": {
|
|
85
|
+
"grid_columns": 6,
|
|
86
|
+
"cleave": {
|
|
87
|
+
"phone": true,
|
|
88
|
+
"phoneRegionCode": "dk",
|
|
89
|
+
"prefix": "+45 ",
|
|
90
|
+
"noImmediatePrefix": false
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
"prefix": {
|
|
95
|
+
"type": "string",
|
|
96
|
+
"title": "Prefix",
|
|
97
|
+
"description": "Prefix",
|
|
98
|
+
"options": {
|
|
99
|
+
"grid_columns": 6,
|
|
100
|
+
"cleave": {
|
|
101
|
+
"prefix": "JE-"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"blocks": {
|
|
106
|
+
"type": "string",
|
|
107
|
+
"title": "Serial number",
|
|
108
|
+
"description": "Blocks, uppercase formatting",
|
|
109
|
+
"options": {
|
|
110
|
+
"grid_columns": 6,
|
|
111
|
+
"inputAttributes": {
|
|
112
|
+
"placeholder": "Enter serial number",
|
|
113
|
+
},
|
|
114
|
+
"cleave": {
|
|
115
|
+
"blocks": [3, 5, 5],
|
|
116
|
+
"uppercase": true,
|
|
117
|
+
"delimiter": "-",
|
|
118
|
+
"delimiterLazyShow": true
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
var element = document.getElementById('form');
|
|
127
|
+
var editor = new JSONEditor(element, options);
|
|
128
|
+
|
|
129
|
+
</script>
|
|
130
|
+
</body>
|
|
131
|
+
|
|
132
|
+
</html>
|