StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some early refactoring of docs and examples

This commit is contained in:
jos 2016-08-13 21:38:32 +02:00
parent a12505b017
commit 24ab2899dc
22 changed files with 34 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@ -58,7 +58,7 @@ with bower:
#### More #### More
There is a directive available for using JSONEditor in Angular.js: There is a directive available for using `jsoneditor` in Angular.js:
[https://github.com/angular-tools/ng-jsoneditor](https://github.com/angular-tools/ng-jsoneditor) [https://github.com/angular-tools/ng-jsoneditor](https://github.com/angular-tools/ng-jsoneditor)
@ -72,8 +72,7 @@ There is a directive available for using JSONEditor in Angular.js:
<!-- when using the mode "code", it's important to specify charset utf-8 --> <!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"> <script src="jsoneditor/dist/jsoneditor.js"></script>
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head> </head>
<body> <body>
<div id="jsoneditor" style="width: 400px; height: 400px;"></div> <div id="jsoneditor" style="width: 400px; height: 400px;"></div>
@ -82,7 +81,7 @@ There is a directive available for using JSONEditor in Angular.js:
// create the editor // create the editor
var container = document.getElementById("jsoneditor"); var container = document.getElementById("jsoneditor");
var options = {}; var options = {};
var editor = new JSONEditor(container, options); var editor = jsoneditor(container, options);
// set json // set json
var json = { var json = {
@ -120,8 +119,8 @@ jsoneditor:
npm run build npm run build
``` ```
This will generate the files `./jsoneditor.js`, `./jsoneditor.css`, and This will generate the file `./dist/jsoneditor.js` and
minified versions in the dist of the project. `./dist/jsoneditor-minimalist.js` and corresponding source maps.
- To automatically build when a source file has changed: - To automatically build when a source file has changed:
@ -129,27 +128,5 @@ jsoneditor:
npm run watch npm run watch
``` ```
This will update `./jsoneditor.js` and `./jsoneditor.css` in the dist folder This will update `./dist/jsoneditor.js` on every change in the source code,
on every change, but it will **NOT** update the minified versions as that's but it will **NOT** update the minimalist version.
an expensive operation.
## Custom builds
The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like [browserify](http://browserify.org/) or [webpack](http://webpack.github.io/). First, install all dependencies of jsoneditor:
npm install
To create a custom bundle of the source code using browserify:
browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor
The Ace editor, used in mode `code`, accounts for about 75% of the total
size of the library. To exclude the Ace editor from the bundle:
browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox
To minify the generated bundle, use [uglifyjs](https://github.com/mishoo/UglifyJS2):
uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c

4
docs/api.md
View File

@ -2,9 +2,9 @@
## JSONEditor ## JSONEditor
### Constructor ### Construction
#### `JSONEditor(container [, options [, json]])` #### `jsoneditor(container [, options [, json]])`
Constructs a new JSONEditor. Constructs a new JSONEditor.

11
docs/usage.md
View File

@ -19,12 +19,11 @@ image. Both full and minified version are available.
## Load ## Load
To implement JSONEditor in a web application, load the javascript and css file To implement JSONEditor in a web application, load the javascript file
in the head of the HTML page: in the head of the HTML page:
```html ```html\
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"> <script src="jsoneditor/dist/jsoneditor.js"></script>
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
``` ```
## Use ## Use
@ -42,7 +41,7 @@ var container = document.getElementById("jsoneditor");
var options = { var options = {
mode: 'tree' mode: 'tree'
}; };
var editor = new JSONEditor(container, options); var editor = jsoneditor(container, options);
``` ```
To set JSON data in the editor: To set JSON data in the editor:
@ -88,7 +87,7 @@ var json = editor.get();
<script> <script>
// create the editor // create the editor
var container = document.getElementById("jsoneditor"); var container = document.getElementById("jsoneditor");
var editor = new JSONEditor(container); var editor = jsoneditor(container);
// set json // set json
function setJSON () { function setJSON () {

2
examples/01_basic_usage.html
View File

@ -23,7 +23,7 @@
// create the editor // create the editor
var container = document.getElementById('jsoneditor'); var container = document.getElementById('jsoneditor');
var options = {}; var options = {};
var editor = new JSONEditor(container, options); var editor = jsoneditor(container, options);
// set json // set json
document.getElementById('setJSON').onclick = function () { document.getElementById('setJSON').onclick = function () {

2
examples/02_viewer.html
View File

@ -37,7 +37,7 @@
'string': 'Hello World' 'string': 'Hello World'
}; };
var editor = new JSONEditor(container, options, json); var editor = jsoneditor(container, options, json);
</script> </script>
</body> </body>
</html> </html>

2
examples/03_switch_mode.html
View File

@ -59,7 +59,7 @@
"string": "Hello World" "string": "Hello World"
}; };
var editor = new JSONEditor(container, options, json); var editor = jsoneditor(container, options, json);
</script> </script>
</body> </body>
</html> </html>

2
examples/04_load_and_save.html
View File

@ -37,7 +37,7 @@
<script> <script>
// create the editor // create the editor
var editor = new JSONEditor(document.getElementById('jsoneditor')); var editor = jsoneditor(document.getElementById('jsoneditor'));
// Load a JSON document // Load a JSON document
FileReaderJS.setupInput(document.getElementById('loadDocument'), { FileReaderJS.setupInput(document.getElementById('loadDocument'), {

2
examples/05_custom_fields_editable.html
View File

@ -56,7 +56,7 @@
age: 32 age: 32
}; };
var editor = new JSONEditor(container, options, json); var editor = jsoneditor(container, options, json);
</script> </script>
</body> </body>
</html> </html>

2
examples/06_custom_styling.html
View File

@ -44,7 +44,7 @@
'object': {'a': 'b', 'c': 'd'}, 'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World' 'string': 'Hello World'
}; };
var editor = new JSONEditor(container, options, json); var editor = jsoneditor(container, options, json);
</script> </script>
</body> </body>
</html> </html>

2
examples/07_json_schema_validation.html
View File

@ -64,7 +64,7 @@
// create the editor // create the editor
var container = document.getElementById('jsoneditor'); var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container, options, json); var editor = jsoneditor(container, options, json);
</script> </script>
</body> </body>
</html> </html>

4
examples/requirejs_demo/scripts/main.js
View File

@ -1,8 +1,8 @@
var module = '../../../dist/jsoneditor'; var module = '../../../dist/jsoneditor';
require([module], function (JSONEditor) { require([module], function (jsoneditor) {
// create the editor // create the editor
var container = document.getElementById('jsoneditor'); var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container); var editor = jsoneditor(container);
// set json // set json
document.getElementById('setJSON').onclick = function () { document.getElementById('setJSON').onclick = function () {

2
gulpfile.js
View File

@ -115,7 +115,7 @@ gulp.task('bundle-minimalist', ['mkdir'], function (done) {
// TODO: zip file using archiver // TODO: zip file using archiver
var pkg = 'jsoneditor-' + require('./package.json').version + '.zip'; var pkg = 'jsoneditor-' + require('./package.json').version + '.zip';
gulp.task('zip', shell.task([ gulp.task('zip', shell.task([
'zip ' + pkg + ' ' + 'README.md NOTICE LICENSE HISTORY.md index.html src dist docs examples -r ' 'zip ' + pkg + ' ' + 'README.md LICENSE HISTORY.md index.html src dist docs examples -r '
])); ]));
// The watch task (to automatically rebuild when the source code changes) // The watch task (to automatically rebuild when the source code changes)

1
index.js
View File

@ -1 +0,0 @@
module.exports = require('./src/js/JSONEditor');

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "jsoneditor", "name": "jsoneditor",
"version": "6.0.0-BETA", "version": "6.0.0-BETA",
"main": "./index", "main": "./src/index",
"description": "A web-based tool to view, edit, format, and validate JSON", "description": "A web-based tool to view, edit, format, and validate JSON",
"tags": [ "tags": [
"json", "json",

5
test/couchdbeditor.html
View File

@ -10,8 +10,7 @@
<link rel="shortcut icon" href="../app/web/favicon.ico"> <link rel="shortcut icon" href="../app/web/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="../jsoneditor/js/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
<link rel="stylesheet" type="text/css" href="../jsoneditor/css/jsoneditor.css">
<style type="text/css"> <style type="text/css">
body, html { body, html {
@ -37,7 +36,7 @@
function init() { function init() {
var container = document.getElementById('jsoneditor'); var container = document.getElementById('jsoneditor');
editor = new JSONEditor(container); editor = jsoneditor(container);
document.getElementById('url').focus(); document.getElementById('url').focus();
} }

3
test/test_bootstrap.html
View File

@ -4,7 +4,6 @@
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" type="text/css">--> <!--<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" type="text/css">-->
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
<style type="text/css"> <style type="text/css">
@ -43,7 +42,7 @@
} }
} }
}; };
var editor = new JSONEditor(container, options); var editor = jsoneditor(container, options);
var text = "[{\"test\":\"test\"}]"; var text = "[{\"test\":\"test\"}]";
var json = JSON.parse(text); var json = JSON.parse(text);

3
test/test_build.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
<style type="text/css"> <style type="text/css">
@ -69,7 +68,7 @@
"url": "http://jsoneditoronline.org" "url": "http://jsoneditoronline.org"
}; };
editor = new JSONEditor(container, options, json); editor = jsoneditor(container, options, json);
console.log('json', json); console.log('json', json);
console.log('string', JSON.stringify(json)); console.log('string', JSON.stringify(json));

3
test/test_destroy.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
<style type="text/css"> <style type="text/css">
@ -73,7 +72,7 @@
"url": "http://jsoneditoronline.org" "url": "http://jsoneditoronline.org"
}; };
editor = new JSONEditor(container, options, json); editor = jsoneditor(container, options, json);
console.log('json', json); console.log('json', json);
console.log('string', JSON.stringify(json)); console.log('string', JSON.stringify(json));

3
test/test_materialize.html
View File

@ -7,7 +7,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
<style> <style>
@ -73,7 +72,7 @@
"url": "http://jsoneditoronline.org" "url": "http://jsoneditoronline.org"
}; };
editor = new JSONEditor(container, options, json); editor = jsoneditor(container, options, json);
console.log('json', json); console.log('json', json);
console.log('string', JSON.stringify(json)); console.log('string', JSON.stringify(json));

5
test/test_build_min.html → test/test_minimalist.html
View File

@ -3,8 +3,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.min.css" rel="stylesheet" type="text/css"> <script src="../dist/jsoneditor-minimalist.js"></script>
<script src="../dist/jsoneditor.min.js"></script>
<style type="text/css"> <style type="text/css">
body { body {
@ -56,7 +55,7 @@
"string": "Hello World" "string": "Hello World"
}; };
editor = new JSONEditor(container, options, json); editor = jsoneditor(container, options, json);
</script> </script>
</body> </body>
</html> </html>

62
test/test_minimalist_min.html
View File

@ -1,62 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor-minimalist.min.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script>
var container, options, json, editor;
container = document.getElementById('jsoneditor');
options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
onError: function (err) {
alert(err.toString());
}
};
json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
};
editor = new JSONEditor(container, options, json);
</script>
</body>
</html>

3
test/test_schema.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
<style type="text/css"> <style type="text/css">
@ -87,7 +86,7 @@
] ]
}; };
var editor = new JSONEditor(container, options, json); var editor = jsoneditor(container, options, json);
console.log('json', json); console.log('json', json);
console.log('schema', schema); console.log('schema', schema);